@genexus/genexus-ide-ui 0.0.57 → 0.0.58

package/dist/components/ch-tooltip.js

@@ -0,0 +1,115 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { f as focusComposedPath } from './helpers.js';
+import { d as defineCustomElement$3 } from './ch-window2.js';
+import { d as defineCustomElement$2 } from './ch-window-close2.js';
+
+const tooltipCss = "*,::after,::before{box-sizing:border-box}ch-tooltip{--ch-tooltip-separation:12px;--ch-tooltip-separation-x:var(--ch-tooltip-separation);--ch-tooltip-separation-y:var(--ch-tooltip-separation);--ch-tooltip-arrow-size:10px;--ch-tooltip-based:calc( 1px - var(--ch-tooltip-arrow-size));--ch-tooltip-centered:calc( 50% - var(--ch-tooltip-arrow-size) / 2);--ch-tooltip-75:calc( 75% - var(--ch-tooltip-arrow-size) / 2);--ch-tooltip-25:calc( 25% - var(--ch-tooltip-arrow-size) / 2);display:flex;position:relative;width:100%;height:100%}ch-tooltip:not([hidden]){display:contents}ch-window[y-align=outside-start]{--ch-window-separation:var(--ch-tooltip-separation-y);--ch-window-separation-y:calc(var(--ch-tooltip-separation-y) * -1)}ch-window[y-align=outside-end]{--ch-window-separation:var(--ch-tooltip-separation-y);--ch-window-separation-y:var(--ch-tooltip-separation-y)}ch-window[x-align=outside-start]+:not(ch-window[y-align=outside-start],ch-window[y-align=outside-end]){--ch-window-separation:var(--ch-tooltip-separation-x);--ch-window-separation-x:calc(var(--ch-tooltip-separation-x) * -1)}ch-window[x-align=outside-end]+:not(ch-window[y-align=outside-start],ch-window[y-align=outside-end]){--ch-window-separation:var(--ch-tooltip-separation-x);--ch-window-separation-x:var(--ch-tooltip-separation-x)}ch-window[y-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end] .tooltip-content::after{clip-path:polygon(0 0, 50% 100%, 100% 0);inset-block-end:var(--ch-tooltip-based)}ch-window[y-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end][x-align=outside-start] .tooltip-content::after{inset-inline-end:0}ch-window[y-align=outside-start][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-start][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-start][x-align=outside-end][x-align=outside-end] .tooltip-content::after{inset-inline-start:0}ch-window[y-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start] .tooltip-content::after{clip-path:polygon(50% 0, 100% 100%, 0 100%);inset-block-start:var(--ch-tooltip-based)}ch-window[y-align=outside-end][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end][x-align=outside-start] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start][x-align=outside-start] .tooltip-content::after{inset-inline-end:0}ch-window[y-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-end][x-align=outside-end] .tooltip-content::after,ch-window[y-align=outside-end][x-align=outside-start][x-align=outside-end] .tooltip-content::after{inset-inline-start:0}ch-window[x-align=outside-start] .tooltip-content::after{clip-path:polygon(100% 50%, 0 0, 0 100%);inset-inline-end:var(--ch-tooltip-based)}ch-window[x-align=outside-end] .tooltip-content::after{clip-path:polygon(100% 0, 0 50%, 100% 100%);inset-inline-start:var(--ch-tooltip-based)}ch-window[x-align=center] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-centered)}ch-window[x-align=inside-start] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-75)}ch-window[x-align=inside-end] .tooltip-content::after{inset-inline-start:var(--ch-tooltip-25)}ch-window[y-align=inside-start] .tooltip-content::after{inset-block-start:var(--ch-tooltip-75)}ch-window[y-align=center] .tooltip-content::after{inset-block-start:var(--ch-tooltip-centered)}ch-window[y-align=inside-end] .tooltip-content::after{inset-block-start:var(--ch-tooltip-25)}.tooltip-content::after{content:\" \";position:absolute;background-color:inherit;width:var(--ch-tooltip-arrow-size);height:var(--ch-tooltip-arrow-size)}";
+
+const mapTooltipAlignToChWindowAlign = {
+  OutsideStart: "outside-start",
+  InsideStart: "inside-start",
+  Center: "center",
+  InsideEnd: "inside-end",
+  OutsideEnd: "outside-end"
+};
+const EXPORT_PARTS = "window:section,mask";
+const ChTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Determines if the window and the tooltip is hidden or visible.
+     * Inherited from ch-window.
+     */
+    this.hidden = true;
+    /**
+     * Specifies the tooltip description.
+     */
+    this.tooltipId = "Tooltip";
+    /**
+     * Specifies the delay (in ms)
+     * for the tooltip to be displayed.
+     */
+    this.delay = 100;
+    /**
+     * Specifies the position of the tooltip relative to
+     * the container element.
+     */
+    this.position = "OutsideStart_Center";
+    this.showWithDelay = () => {
+      setTimeout(() => {
+        this.hidden = false;
+      }, this.delay);
+    };
+    this.handleEnter = () => {
+      if (!this.hidden) {
+        return;
+      }
+      this.showWithDelay();
+    };
+    this.handleLeave = () => {
+      if (this.container === focusComposedPath()[0]) {
+        this.hidden = false;
+      }
+      this.hidden = true;
+    };
+    this.addListeners = () => {
+      this.container.addEventListener("focus", this.handleEnter);
+      this.container.addEventListener("focusout", this.handleLeave);
+      this.container.addEventListener("mouseenter", this.handleEnter);
+      this.container.addEventListener("mouseleave", this.handleLeave);
+    };
+    this.removeListeners = () => {
+      this.container.removeEventListener("focus", this.handleEnter);
+      this.container.removeEventListener("focusout", this.handleLeave);
+      this.container.removeEventListener("mouseenter", this.handleEnter);
+      this.container.removeEventListener("mouseleave", this.handleLeave);
+    };
+  }
+  componentDidLoad() {
+    this.container = document.querySelector('[slot="container"] > :first-child');
+    this.addListeners();
+  }
+  disconnectedCallback() {
+    this.removeListeners();
+  }
+  render() {
+    const aligns = this.position.split("_");
+    const alignX = aligns[0];
+    const alignY = aligns[1];
+    return (h(Host, null, h("slot", { name: "container" }), h("ch-window", { exportparts: EXPORT_PARTS, "show-header": false, "show-footer": false, modal: false, "close-on-escape": true, hidden: this.hidden, container: this.container, xAlign: mapTooltipAlignToChWindowAlign[alignX], yAlign: mapTooltipAlignToChWindowAlign[alignY] }, h("div", { role: "tooltip", class: "tooltip-content", id: this.tooltipId }, h("slot", { name: "content" })))));
+  }
+  static get style() { return tooltipCss; }
+}, [4, "ch-tooltip", {
+    "tooltipId": [1, "tooltip-id"],
+    "delay": [2],
+    "position": [1],
+    "hidden": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-tooltip", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChTooltip$1);
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const ChTooltip = ChTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChTooltip, defineCustomElement };

package/dist/components/gx-ide-references.js

@@ -1,24 +1,25 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { L as Locale } from './locale.js';
-import { u as updateTreeModel, r as renderTreeItems } from './update-tree-model.js';
 import { r as renderSuggestLists } from './render-suggest.js';
-import { d as defineCustomElement$i } from './icon.js';
-import { d as defineCustomElement$h } from './ch-suggest2.js';
-import { d as defineCustomElement$g } from './ch-suggest-list2.js';
-import { d as defineCustomElement$f } from './ch-suggest-list-item2.js';
-import { d as defineCustomElement$e } from './ch-window2.js';
-import { d as defineCustomElement$d } from './ch-window-close2.js';
-import { d as defineCustomElement$c } from './container.js';
-import { d as defineCustomElement$b } from './button.js';
-import { d as defineCustomElement$a } from './form-checkbox.js';
-import { d as defineCustomElement$9 } from './icon2.js';
-import { d as defineCustomElement$8 } from './gxg-label2.js';
-import { d as defineCustomElement$7 } from './suggest.js';
-import { d as defineCustomElement$6 } from './text.js';
-import { d as defineCustomElement$5 } from './title.js';
-import { d as defineCustomElement$4 } from './tooltip.js';
-import { d as defineCustomElement$3 } from './gxg-tree2.js';
-import { d as defineCustomElement$2 } from './gxg-tree-item2.js';
+import { d as defineCustomElement$k } from './checkbox.js';
+import { d as defineCustomElement$j } from './icon.js';
+import { d as defineCustomElement$i } from './ch-suggest2.js';
+import { d as defineCustomElement$h } from './ch-suggest-list2.js';
+import { d as defineCustomElement$g } from './ch-suggest-list-item2.js';
+import { d as defineCustomElement$f } from './tree-x.js';
+import { d as defineCustomElement$e } from './tree-x-list-item.js';
+import { d as defineCustomElement$d } from './ch-window2.js';
+import { d as defineCustomElement$c } from './ch-window-close2.js';
+import { d as defineCustomElement$b } from './container.js';
+import { d as defineCustomElement$a } from './button.js';
+import { d as defineCustomElement$9 } from './form-checkbox.js';
+import { d as defineCustomElement$8 } from './icon2.js';
+import { d as defineCustomElement$7 } from './gxg-label2.js';
+import { d as defineCustomElement$6 } from './suggest.js';
+import { d as defineCustomElement$5 } from './text.js';
+import { d as defineCustomElement$4 } from './title.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$2 } from './tree-view.js';
 
 /**
  * @description This function converts SelectorCategoryData[] SuggestData
@@ -47,35 +48,32 @@ const convertObjectDataToSuggestData = (selectorCategoriesData) => {
   }
   return suggestData;
 };
+const convertToTreeItem = (item) => {
+  var _a;
+  return ({
+    caption: item.description,
+    id: item.id,
+    items: ((_a = item.items) !== null && _a !== void 0 ? _a : []).map(convertToTreeItem),
+    lazy: item.hasChildren && (item.items == null || item.items.length === 0),
+    leaf: item.hasChildren === false,
+    leftImgSrc: item.icon
+  });
+};
 /**
- * @description This function converts ReferenceData[] data to GxgTreeItemData[]
+ * @description This function converts ReferenceData[] data to TreeItemData[]
  */
-const convertReferenceDataToTreeData = (referencedBy) => {
+const convertReferenceDataToTreeViewData = (referenceData) => {
   const treeData = [];
-  if (!referencedBy) {
+  if (!referenceData) {
     return treeData;
   }
-  const convertItem = (item) => {
-    var _a;
-    const treeItem = {
-      description: item.description,
-      lazy: item.hasChildren,
-      icon: item.icon,
-      id: item.id,
-      label: item.name
-    };
-    if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-      treeItem.items = item.items.map(child => convertItem(child));
-    }
-    return treeItem;
-  };
-  referencedBy.forEach(item => {
-    treeData.push(convertItem(item));
+  referenceData.forEach(item => {
+    treeData.push(convertToTreeItem(item));
   });
   return treeData;
 };
 
-const referencesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block}.header{}.header__top{grid-template-columns:min-content auto 1fr min-content;grid-template-rows:1fr;grid-template-areas:\"hide-bar-button suggest-label gxg-suggest selector-dialog-button\"}.header__top .hide-bar-button{grid-area:hide-bar-button}.header__top .suggest-label{grid-area:suggest-label}.header__top gxg-suggest{grid-area:gxg-suggest}.header__top .selector-dialog-button{grid-area:selector-dialog-button}.header__bottom{display:grid;grid-template-rows:1fr;transition:var(--gx-ide-timing-super-fast-ms) grid-template-rows}.header__bottom--hidden{grid-template-rows:0fr}.header__bottom .outer-wrapper{overflow:hidden}.header__bottom .inner-wrapper{padding-top:var(--gx-ide-grid-row-gap);display:flex;flex-direction:row;align-items:center;justify-content:space-between}.header__bottom .inner-wrapper__left{display:flex;align-items:center;gap:var(--gx-ide-grid-row-gap)}.header-hidden .first-row{grid-template-columns:auto 1fr auto}.header-hidden .first-row>:nth-child(3){align-self:end}.header-hidden .second-row{display:none}.main{grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-template-areas:\"is-referenced has-references\";height:100%;gap:0}.main>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.main .is-referenced{grid-area:is-referenced}.main .has-references{grid-area:has-references}";
+const referencesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block}.header{}.header__top{grid-template-columns:min-content auto 1fr min-content;grid-template-rows:1fr;grid-template-areas:\"hide-bar-button suggest-label gxg-suggest selector-dialog-button\"}.header__top .hide-bar-button{grid-area:hide-bar-button}.header__top .suggest-label{grid-area:suggest-label}.header__top gxg-suggest{grid-area:gxg-suggest}.header__top .selector-dialog-button{grid-area:selector-dialog-button}.header__bottom{display:grid;grid-template-rows:1fr;transition:var(--gx-ide-timing-super-fast-ms) grid-template-rows}.header__bottom--hidden{grid-template-rows:0fr}.header__bottom .outer-wrapper{overflow:hidden}.header__bottom .inner-wrapper{padding-top:var(--gx-ide-grid-row-gap);display:flex;flex-direction:row;align-items:center;justify-content:space-between}.header__bottom .inner-wrapper__left{display:flex;align-items:center;gap:var(--gx-ide-grid-row-gap)}.header-hidden .first-row{grid-template-columns:auto 1fr auto}.header-hidden .first-row>:nth-child(3){align-self:end}.header-hidden .second-row{display:none}.main{grid-template-columns:1fr 1fr;grid-template-rows:1fr;grid-template-areas:\"is-referenced has-references\";height:100%;gap:0}.main .reference-container{min-height:300px}.main .reference-container--no-references{display:flex;align-items:center;justify-content:center}.main>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.main .is-referenced{grid-area:is-referenced}.main .has-references{grid-area:has-references}";
 
 const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -94,16 +92,28 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     // 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.
@@ -149,26 +159,16 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      */
     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);
+          }
+        });
       }
     };
     /**
@@ -177,71 +177,27 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     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;
@@ -271,22 +227,28 @@ const GxIdeReferences$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     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 assetsDirs() { return ["gx-ide-assets/references"]; }
   get el() { return this; }
@@ -312,94 +274,104 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-references", "ch-icon", "ch-suggest", "ch-suggest-list", "ch-suggest-list-item", "ch-window", "ch-window-close", "gx-ide-container", "gxg-button", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-suggest", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree", "gxg-tree-item"];
+  const components = ["gx-ide-references", "ch-checkbox", "ch-icon", "ch-suggest", "ch-suggest-list", "ch-suggest-list-item", "ch-tree-x", "ch-tree-x-list-item", "ch-window", "ch-window-close", "gx-ide-container", "gxg-button", "gxg-form-checkbox", "gxg-icon", "gxg-label", "gxg-suggest", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-tree-view"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-references":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GxIdeReferences$1);
       }
       break;
+    case "ch-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
     case "ch-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "ch-suggest":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "ch-suggest-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "ch-suggest-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "ch-tree-x":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }
       break;
-    case "ch-window":
+    case "ch-tree-x-list-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "ch-window-close":
+    case "ch-window":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }
       break;
-    case "gx-ide-container":
+    case "ch-window-close":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }
       break;
-    case "gxg-button":
+    case "gx-ide-container":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }
       break;
-    case "gxg-form-checkbox":
+    case "gxg-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
       break;
-    case "gxg-icon":
+    case "gxg-form-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "gxg-label":
+    case "gxg-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "gxg-suggest":
+    case "gxg-label":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "gxg-text":
+    case "gxg-suggest":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "gxg-title":
+    case "gxg-text":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "gxg-tooltip":
+    case "gxg-title":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "gxg-tree":
+    case "gxg-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "gxg-tree-item":
+    case "gxg-tree-view":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/gx-ide-test.js

@@ -1,5 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { u as updateTreeModel, r as renderTreeItems } from './update-tree-model.js';
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$9 } from './icon.js';
 import { d as defineCustomElement$8 } from './button.js';
 import { d as defineCustomElement$7 } from './form-checkbox.js';
@@ -9,6 +8,53 @@ import { d as defineCustomElement$4 } from './tooltip.js';
 import { d as defineCustomElement$3 } from './gxg-tree2.js';
 import { d as defineCustomElement$2 } from './gxg-tree-item2.js';
 
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const renderTreeItems = (treeItemsModel, firstCall = true) => {
+  if (treeItemsModel === null || treeItemsModel === void 0 ? void 0 : treeItemsModel.length) {
+    if (firstCall) {
+      return treeItemsModel.map((item) => {
+        return renderTreeItem(item);
+      });
+    }
+    else {
+      return (h("gxg-tree", { slot: "tree" }, treeItemsModel.map((item) => {
+        return renderTreeItem(item);
+      })));
+    }
+  }
+  return [];
+};
+const renderTreeItem = (item) => {
+  var _a;
+  const childrenLength = item.items ? item.items.length : 0;
+  const isLeaf = !!(childrenLength === 0 || item.leaf);
+  const lazy = !!item.lazy;
+  return (h("gxg-tree-item", { checkbox: item.checkbox, checked: item.checked, description: item.description, disabled: item.disabled, icon: item.icon, indeterminate: item.indeterminate, id: item.id, key: `tree-item-${item.id}`, label: item.label, leaf: isLeaf && !lazy, numberOfChildren: childrenLength, opened: item.opened, selected: item.selected }, [item.label, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && renderTreeItems(item.items, false)]));
+};
+
+const updateNodeById = (actualModel, nodeUpdatedState, updatedNodeId) => {
+  return actualModel.map(nodeActualState => {
+    if (nodeActualState.id === updatedNodeId) {
+      return Object.assign(Object.assign({}, nodeActualState), nodeUpdatedState);
+    }
+    else if (nodeActualState.items) {
+      return Object.assign(Object.assign({}, nodeActualState), { items: updateNodeById(nodeActualState.items, nodeUpdatedState, updatedNodeId) });
+    }
+    else {
+      return nodeActualState;
+    }
+  });
+};
+const updateTreeModel = (actualModel, updatedNodeModel, updatedNodeId) => {
+  if (actualModel.length && updatedNodeModel && updatedNodeId) {
+    return updateNodeById(actualModel, updatedNodeModel, updatedNodeId);
+  }
+  else {
+    /* If no newItemModel was passed, at least return the actualModel, to avoid having an updated empty tree */
+    return actualModel;
+  }
+};
+
 const testCss = ":host{display:block}";
 
 const GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {