@genexus/genexus-ide-ui 0.0.20 → 0.0.21

package/dist/components/ch-grid2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
 import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet.js';
-import { m as mouseEventModifierKey } from './helpers.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';
@@ -948,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;
@@ -997,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());
@@ -1859,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 = [];
     /**
@@ -1905,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) {
@@ -2039,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;
       }
@@ -2060,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() {
@@ -2079,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") {
@@ -2091,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);
@@ -2335,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;
@@ -2452,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-suggest2.js

@@ -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).
@@ -226,7 +225,6 @@ const ChSuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "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 };

package/dist/components/checkbox.js

@@ -0,0 +1,115 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { D as DISABLED_CLASS } from './reserverd-names.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 CHECKBOX_ID = "checkbox";
+const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;
+const CheckBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.click = createEvent(this, "click", 7);
+    this.input = createEvent(this, "input", 7);
+    /**
+     * This attribute lets you specify if the element is disabled.
+     * If disabled, it will not fire any user interaction related event
+     * (for example, click event).
+     */
+    this.disabled = false;
+    /**
+     * True to highlight control when an action is fired.
+     */
+    this.highlightable = false;
+    /**
+     * `true` if the control's value is indeterminate.
+     */
+    this.indeterminate = false;
+    /**
+     * This attribute indicates that the user cannot modify the value of the control.
+     * Same as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+     * attribute for `input` elements.
+     */
+    this.readonly = false;
+    this.getValue = (checked) => checked ? this.checkedValue : this.unCheckedValue;
+    /**
+     * Checks if it is necessary to prevent the click from bubbling
+     */
+    this.handleClick = (event) => {
+      if (this.readonly || this.disabled) {
+        return;
+      }
+      event.stopPropagation();
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      const inputRef = event.target;
+      const checked = inputRef.checked;
+      const value = this.getValue(checked);
+      this.checked = checked;
+      this.value = value;
+      inputRef.value = value; // Update input's value before emitting the event
+      this.input.emit(event);
+      if (this.highlightable) {
+        this.click.emit();
+      }
+    };
+  }
+  valueChanged() {
+    this.checked = this.value === this.checkedValue;
+  }
+  componentWillLoad() {
+    this.checked = this.value === this.checkedValue;
+  }
+  render() {
+    var _a;
+    const additionalParts = PARTS(this.checked, this.indeterminate);
+    return (h(Host, { class: {
+        [DISABLED_CLASS]: this.disabled,
+        "ch-checkbox--actionable": (!this.readonly && !this.disabled) ||
+          (this.readonly && this.highlightable)
+      } }, h("div", { class: {
+        container: true,
+        "container--checked": this.checked
+      }, part: `container${additionalParts}` }, h("input", { "aria-label": ((_a = this.accessibleName) === null || _a === void 0 ? void 0 : _a.trim()) !== "" &&
+        this.accessibleName !== this.caption
+        ? this.accessibleName
+        : null, id: this.caption ? CHECKBOX_ID : null, class: "input", part: "input", type: "checkbox", checked: this.checked, disabled: this.disabled || this.readonly, indeterminate: this.indeterminate, value: this.value, onClick: this.handleClick, onInput: this.handleChange }), h("div", { class: {
+        option: true,
+        "option--checked": this.checked && !this.indeterminate,
+        "option--indeterminate": this.indeterminate
+      }, part: `option${additionalParts}`, "aria-hidden": "true" })), this.caption && (h("label", { class: "label", part: "label", htmlFor: CHECKBOX_ID, onClick: this.handleClick }, this.caption))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+  static get style() { return checkboxCss; }
+}, [1, "ch-checkbox", {
+    "accessibleName": [1, "accessible-name"],
+    "caption": [1],
+    "checked": [1028],
+    "checkedValue": [1, "checked-value"],
+    "disabled": [4],
+    "highlightable": [4],
+    "indeterminate": [4],
+    "readonly": [4],
+    "unCheckedValue": [1, "un-checked-value"],
+    "value": [1025]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CheckBox);
+      }
+      break;
+  } });
+}
+
+export { CheckBox as C, defineCustomElement as d };