@genexus/genexus-ide-ui 0.0.57 → 0.0.58

package/dist/collection/components/references/references.js

@@ -2,10 +2,8 @@
 import { Host, h } from "@stencil/core";
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
-import { renderTreeItems } from "../../common/render-tree";
-import { updateTreeModel } from "../../common/update-tree-model";
 import { renderSuggestLists } from "../../common/render-suggest";
-import { convertObjectDataToSuggestData, convertReferenceDataToTreeData } from "./helpers";
+import { convertObjectDataToSuggestData, convertReferenceDataToTreeViewData } from "./helpers";
 export class GxIdeReferences {
   constructor() {
     /**
@@ -19,16 +17,28 @@ export class GxIdeReferences {
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
+    this.attachTreeEvents = () => {
+      // this.referencedByTreeEl.addEventListener(
+      //   "expandedItemChange",
+      //   (item: CustomEvent<{ id: string; expanded: boolean }>) => {
+      //     console.log(item.detail.id);
+      //   }
+      // );
+      // this.referencesToTreeEl.addEventListener(
+      //   "expandedItemChange",
+      //   (item: CustomEvent<{ id: string; expanded: boolean }>) => {
+      //     console.log(item.detail.id);
+      //   }
+      // );
+    };
     /**
      * It attaches on the ch-suggest, the "itemSelected" event triggered by the ch-suggest-list-item. This helps set the new 'selectedObject'.
      */
-    this.attachSelectObjectListener = () => {
-      this.selectObjectSuggestEl.addEventListener("itemSelected", (e) => {
-        const categoryIndex = e.detail.indexes.listIndex;
-        const itemIndex = e.detail.indexes.itemIndex;
-        this.selectedObject =
-          this.selectorCategoryData[categoryIndex].items[itemIndex];
-      });
+    this.selectObjectSelectionChanged = (e) => {
+      const categoryIndex = e.detail.indexes.listIndex;
+      const itemIndex = e.detail.indexes.itemIndex;
+      this.selectedObject =
+        this.selectorCategoryData[categoryIndex].items[itemIndex];
     };
     /**
      * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
@@ -74,26 +84,16 @@ export class GxIdeReferences {
      */
     this.loadReferencesHandler = async (id, to = false) => {
       if (this.loadReferencesCallback) {
-        /* is referenced by*/
-        if (!to) {
-          this.loadReferencesCallback(id, false)
-            .then(result => {
-            this.referencedByTreeData = convertReferenceDataToTreeData(result);
-          })
-            .catch(() => {
-            /* To do*/
-          });
-        }
-        /* is referenced by*/
-        if (to) {
-          this.loadReferencesCallback(id, true)
-            .then(result => {
-            this.referencesToTreeData = convertReferenceDataToTreeData(result);
-          })
-            .catch(() => {
-            /* To do*/
-          });
-        }
+        this.loadReferencesCallback(id, to).then(result => {
+          if (to) {
+            this.referencesToTreeData =
+              convertReferenceDataToTreeViewData(result);
+          }
+          else {
+            this.referencedByTreeData =
+              convertReferenceDataToTreeViewData(result);
+          }
+        });
       }
     };
     /**
@@ -102,71 +102,27 @@ export class GxIdeReferences {
     this.hideBarButtonClickedHandler = () => {
       this.barHidden = !this.barHidden;
     };
-    /**
-     * Simple helper function to get 'this.referencedByTreeData' or 'this.referencesToTreeData'
-     */
-    this.getRef = (to = false) => {
-      if (!to) {
-        /* referenced by*/
-        return this.referencedByTreeData;
-      }
-      else {
-        /* references to*/
-        return this.referencesToTreeData;
-      }
-    };
-    /**
-     * Simple helper function to update 'this.referencedByTreeData' or 'this.referencesToTreeData'
-     */
-    this.updateRef = (to = false, updatedData) => {
-      if (!to) {
-        /* referenced by*/
-        this.referencedByTreeData = updatedData;
-      }
-      else {
-        /* references to*/
-        this.referencesToTreeData = updatedData;
+    this.referencesLazyLoadCallbackHandler = (ref) => async (treeItemId) => {
+      if (this.loadReferencesCallback) {
+        const to = ref === "references-to";
+        const referencesLazyChildren = await this.loadReferencesCallback(treeItemId, to);
+        const treeLazyChildren = convertReferenceDataToTreeViewData(referencesLazyChildren);
+        return new Promise(resolve => {
+          resolve(treeLazyChildren);
+        });
       }
+      return new Promise(resolve => {
+        resolve([]);
+      });
     };
-    /**
-     * Handles changes on any of the references (by or to). Used to:
-     * 1) Keep the models updated.
-     * 2) call the openObjectCallback.
-     * 3) call the loadReferencesCallback if a lazy node was toggled.
-     */
-    this.referencesPanelStateChangedHandler = (to = false) => (e) => {
-      const event = e.detail.emittedBy;
-      const nodeData = e.detail.itemData;
-      const nodeId = e.detail.itemData.id;
-      const nodeLabel = e.detail.itemData.label;
-      /* tree item was selected*/
-      if (event === "selectionChanged") {
-        this.selectReferenceCallback(nodeId);
-        /* Returns void Promise*/
-      }
-      /* tree item was double-clicked.*/
-      if (event === "doubleClicked") {
-        this.openObjectCallback(nodeId);
-      }
-      let updatedTreeModel = [];
-      const lazy = nodeData.lazy;
-      if (lazy) {
-        // loadReferencesCallback
-        let children = [];
-        this.loadReferencesCallback(nodeId, to)
-          .then(result => {
-          children = convertReferenceDataToTreeData(result);
-          // Then update model
-          updatedTreeModel = updateTreeModel(this.getRef(to), { id: nodeId, label: nodeLabel, items: children }, nodeId);
-          this.updateRef(to, updatedTreeModel);
-        })
-          .catch(() => {
-          /* To do*/
+    this.referenceSelectedHandler = (selectedItem) => {
+      if (this.selectReferenceCallback) {
+        const selectedItems = [];
+        selectedItem.detail.forEach(item => {
+          selectedItems.push(item.id);
         });
-      }
-      else {
-        updatedTreeModel = updateTreeModel(this.getRef(to), nodeData, nodeId);
-        this.updateRef(to, updatedTreeModel);
+        this.selectReferenceCallback(selectedItems[0]);
+        // returns void
       }
     };
     this.referencedByTreeData = undefined;
@@ -196,22 +152,28 @@ export class GxIdeReferences {
     this.evaluateInitialReferenceData();
   }
   componentDidLoad() {
-    this.attachSelectObjectListener();
+    this.attachTreeEvents();
   }
   componentDidRender() {
     this.componentDidRenderEvent.emit(this._componentLocale.componentName);
   }
   // 10.RENDER() FUNCTION //
   render() {
-    var _a, _b, _c, _d, _e, _f;
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, onSelectionChanged: this.selectObjectSelectionChanged, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
         "header__bottom": true,
         "header__bottom--hidden": this.barHidden
-      } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid gxi-full-height gxi-overflow-auto" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, fullHeight: true, noContentPadding: true, class: "gxi-overflow-auto", part: "referenced-by-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(false), part: "referenced-by-tree" }, renderTreeItems(this.referencedByTreeData)), !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "referenced-by-text" }, ((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) === 0
+      } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid gxi-full-height gxi-overflow-auto" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, fullHeight: true, class: "gxi-overflow-auto", part: "referenced-by-container" }, h("div", { class: {
+        "reference-container": true,
+        "reference-container--no-references": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length)
+      } }, h("gxg-tree-view", { class: { "gxi-hidden": !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) }, part: "referenced-by-tree", treeModel: this.referencedByTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("referenced-by"), onSelectedItemsChange: this.referenceSelectedHandler, dragDisabled: true, dropDisabled: true }), !((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "referenced-by-text" }, ((_d = this.referencedByTreeData) === null || _d === void 0 ? void 0 : _d.length) === 0
       ? this._componentLocale.main.isReferencedByEmpty
-      : this._componentLocale.main.isReferencedByError))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, fullHeight: true, noContentPadding: true, class: "gxi-overflow-auto", part: "references-to-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_d = this.referencesToTreeData) === null || _d === void 0 ? void 0 : _d.length) }, checkbox: false, onTreeItemStateChanged: this.referencesPanelStateChangedHandler(true), part: "references-to-tree" }, renderTreeItems(this.referencesToTreeData)), !((_e = this.referencesToTreeData) === null || _e === void 0 ? void 0 : _e.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "references-to-text" }, ((_f = this.referencesToTreeData) === null || _f === void 0 ? void 0 : _f.length) === 0
+      : this._componentLocale.main.isReferencedByError)))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, fullHeight: true, class: "gxi-overflow-auto", part: "references-to-container" }, h("div", { class: {
+        "reference-container": true,
+        "reference-container--no-references": !((_e = this.referencesToTreeData) === null || _e === void 0 ? void 0 : _e.length)
+      } }, h("gxg-tree-view", { class: { "gxi-hidden": !((_f = this.referencesToTreeData) === null || _f === void 0 ? void 0 : _f.length) }, part: "referenced-to-tree", treeModel: this.referencesToTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("references-to"), onSelectedItemsChange: this.referenceSelectedHandler }), !((_g = this.referencesToTreeData) === null || _g === void 0 ? void 0 : _g.length) && (h("gxg-text", { textAlign: "center", padding: "m", type: "text-regular", maxWidth: this.referencesMessagesMaxWidth, part: "references-to-text" }, ((_h = this.referencesToTreeData) === null || _h === void 0 ? void 0 : _h.length) === 0
       ? this._componentLocale.main.hasReferencesEmpty
-      : this._componentLocale.main.hasReferencesToError)))))));
+      : this._componentLocale.main.hasReferencesToError))))))));
   }
   static get is() { return "gx-ide-references"; }
   static get encapsulation() { return "shadow"; }

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,18 +8,22 @@ 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.itemContextmenu = createEvent(this, "itemContextmenu", 7);
+    this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
+    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
     // 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.
@@ -28,12 +31,12 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.waitDropProcessing = 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;
     /**
@@ -44,6 +47,11 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Set this attribute if you want to allow multi selection of the items.
      */
     this.multiSelection = false;
+    /**
+     * 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.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
     /**
      * `true` to display the relation between tree items and tree lists using
      * lines.
@@ -63,6 +71,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 +95,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,13 +170,13 @@ 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;
+      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, editable: (_c = treeSubModel.editable) !== null && _c !== void 0 ? _c : 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: treeSubModel.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;
       this.flattenedTreeModel.set(item.id, {
         parentItem: parentModel,
         item: item
@@ -173,10 +187,8 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       (_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);
-      }
+      (_d = item.order) !== null && _d !== void 0 ? _d : (item.order = DEFAULT_ORDER_VALUE);
+      (_e = item.selected) !== null && _e !== void 0 ? _e : (item.selected = DEFAULT_SELECTED_VALUE);
       if (item.selected) {
         this.selectedItems.add(item.id);
       }
@@ -191,9 +203,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
@@ -344,11 +355,15 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
     });
   }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
   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,14 +379,13 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   flattenModel() {
     this.flattenedTreeModel.clear();
-    this.flattenedLazyTreeModel.clear();
     this.flattenSubModel({ id: null, caption: null, items: this.treeModel });
   }
   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"]
@@ -387,6 +401,7 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "lazyLoadTreeItemsCallback": [16],
     "modifyItemCaptionCallback": [16],
     "multiSelection": [4, "multi-selection"],
+    "editableItems": [4, "editable-items"],
     "showLines": [1, "show-lines"],
     "sortItemsCallback": [16],
     "waitDropProcessing": [32],
@@ -396,12 +411,12 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "updateAllItemsProperties": [64],
     "updateItemsProperties": [64],
     "updateValidDropZone": [64]
-  }, [[0, "loadLazyContent", "loadLazyChildrenHandler"], [0, "modifyCaption", "handleCaptionModification"]]]);
+  }, [[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 +424,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();
       }