@genexus/genexus-ide-ui 0.0.16 → 0.0.18

package/dist/esm/{gx-ide-container_2.entry.js → gx-ide-container.entry.js}

@@ -130,34 +130,4 @@ const GxIdeContainer = class {
 };
 GxIdeContainer.style = containerCss;
 
-const topBarCss = ":host{display:block;box-sizing:border-box}.wrapper{display:flex;justify-content:space-between;padding:var(--spacing-comp-01) var(--spacing-comp-02);transition:background-color var(--gx-ide-timing-super-fast-ms);background-color:var(--gray-01)}gxg-title::part(title){color:var(--color-on-secondary);transition:color var(--gx-ide-timing-super-fast-ms)}";
-
-const GxIdeTopBar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.topBarTitle = undefined;
-  }
-  // 5.EVENTS (EMIT) //
-  // 6.METHODS //
-  componentWillLoad() {
-    this.evaluateSlots();
-  }
-  // 7.LISTENERS //
-  // 8.PUBLIC METHODS API //
-  // 9.LOCAL METHODS //
-  evaluateSlots() {
-    // header
-    const menuSlot = this.el.querySelectorAll('[slot="menu"]');
-    if (menuSlot.length) {
-      this._hasMenuSlot = true;
-    }
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return (h(Host, null, h("div", { class: "wrapper", part: "wrapper" }, h("div", { class: "wrapper__left", part: "wrapper-left" }, h("gxg-title", { type: "title-04", exportparts: "title: gxg-title" }, this.topBarTitle)), h("div", { class: "wrapper__right", part: "wrapper-right" }, this._hasMenuSlot ? (h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-vertical" }, h("slot", { name: "menu" }))) : null))));
-  }
-  get el() { return getElement(this); }
-};
-GxIdeTopBar.style = topBarCss;
-
-export { GxIdeContainer as gx_ide_container, GxIdeTopBar as gx_ide_top_bar };
+export { GxIdeContainer as gx_ide_container };

package/dist/esm/gx-ide-new-kb.entry.js

@@ -104,24 +104,24 @@ const GxIdeNewKb = class {
       return gxOptions;
     };
     this.createKbHandler = () => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
       if (this.createCallback) {
         const createCallbackPromise = this.createCallback({
-          kbName: this.kbNameEl.value,
-          kbLocation: this.locationEl.value,
-          prototypingTarget: this.prototypingTargetEl.value,
-          userInterfaceLanguage: this.userInterfaceLanguageEl.value,
-          prototypingEnvironment: this.prototypingEnvironmentEl.value,
-          dataSource: this.dataSourceEl.value,
+          kbName: (_a = this.kbNameEl) === null || _a === void 0 ? void 0 : _a.value,
+          kbLocation: (_b = this.locationEl) === null || _b === void 0 ? void 0 : _b.value,
+          prototypingTarget: (_c = this.prototypingTargetEl) === null || _c === void 0 ? void 0 : _c.value,
+          userInterfaceLanguage: (_d = this.userInterfaceLanguageEl) === null || _d === void 0 ? void 0 : _d.value,
+          prototypingEnvironment: (_e = this.prototypingEnvironmentEl) === null || _e === void 0 ? void 0 : _e.value,
+          dataSource: (_f = this.dataSourceEl) === null || _f === void 0 ? void 0 : _f.value,
           frontEnds: this.getFrontEndOptionsValues(),
-          serverName: this.serverNameEl.value,
-          databaseName: this.databaseNameEl.value,
-          collation: this.collationEl.value,
-          createDataFilesInKBFolder: this.createDataFilesInKBFolderEl.checked,
-          authenticationType: this.authenticationTypeEl.value,
-          userName: (_a = this.userNameEl) === null || _a === void 0 ? void 0 : _a.value,
-          password: (_b = this.passwordEl) === null || _b === void 0 ? void 0 : _b.value,
-          savePassword: (_c = this.savePasswordEl) === null || _c === void 0 ? void 0 : _c.checked
+          serverName: (_g = this.serverNameEl) === null || _g === void 0 ? void 0 : _g.value,
+          databaseName: (_h = this.databaseNameEl) === null || _h === void 0 ? void 0 : _h.value,
+          collation: (_j = this.collationEl) === null || _j === void 0 ? void 0 : _j.value,
+          createDataFilesInKBFolder: (_k = this.createDataFilesInKBFolderEl) === null || _k === void 0 ? void 0 : _k.checked,
+          authenticationType: (_l = this.authenticationTypeEl) === null || _l === void 0 ? void 0 : _l.value,
+          userName: (_m = this.userNameEl) === null || _m === void 0 ? void 0 : _m.value,
+          password: (_o = this.passwordEl) === null || _o === void 0 ? void 0 : _o.value,
+          savePassword: (_p = this.savePasswordEl) === null || _p === void 0 ? void 0 : _p.checked
         });
         createCallbackPromise.then(formSubmitResult => {
           formSubmitValidation(formSubmitResult, this);
@@ -151,7 +151,6 @@ const GxIdeNewKb = class {
     this.userNameVisible = true;
     this.passwordVisible = true;
     this.savePasswordVisible = true;
-    this.hideTopBar = false;
     this.dataSources = undefined;
     this.frontEnds = undefined;
     this.isAdvanced = false;
@@ -187,7 +186,7 @@ const GxIdeNewKb = class {
    *  11.RENDER() FUNCTION
    ********************************/
   render() {
-    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", null, h("header", { class: {
         "header": true,
         "grid": true,
         "header--is-advanced": this.isAdvanced

package/dist/esm/gx-ide-references.entry.js

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-4f0a5746.js';
 import { L as Locale } from './locale-e183487a.js';
-import { r as renderTreeItems } from './render-tree-fc8636a3.js';
+import { u as updateTreeModel, r as renderTreeItems } from './update-tree-model-80419058.js';
 
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const renderSuggestLists = (suggestData) => {
@@ -115,7 +115,7 @@ const GxIdeReferences = class {
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
     /**
-     * @description It attaches on the ch-suggest, the "itemSelected" event triggered by the ch-suggest-list-item. This helps set the new 'selectedObject'.
+     * 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) => {
@@ -126,61 +126,7 @@ const GxIdeReferences = class {
       });
     };
     /**
-     * @description It attaches several events on the 'referencedByEl' element, which is a tree.
-     */
-    this.attachReferencedByListeners = () => {
-      /* 'toggleIconClicked' Event: This events gets fired when the user clicks on the toggle icon, that opens/close a tree. Here we only use it to check if the item has lazy items to be loaded. */
-      this.referencedByEl.addEventListener("toggleIconClicked", async (e) => {
-        if (e.detail.lazy && e.detail.id) {
-          this.loadReferencesCallback(e.detail.id, false)
-            .then(result => {
-            this.referencedBy = result;
-          })
-            .catch(() => {
-            // to do
-          });
-        }
-      });
-      /* 'selectionChanged' Event: Fired when a new tree item was selected.*/
-      this.referencedByEl.addEventListener("selectionChanged", (e) => {
-        this.selectReferenceCallback(e.detail.id);
-        /* Returns void Promise*/
-      });
-      /* 'doubleClicked' Event: Fired when a tree item was double-clicked.*/
-      this.referencedByEl.addEventListener("doubleClicked", (e) => {
-        this.openObjectCallback(e.detail.id);
-        /* Returns void Promise*/
-      });
-    };
-    /**
-     * @description It attaches several events on the 'referencesToEl' element, which is a tree.
-     */
-    this.attachReferencesToListeners = () => {
-      /* 'toggleIconClicked' Event: (Read description on 'attachReferencedByListeners' as it does the same)*/
-      this.referencesToEl.addEventListener("toggleIconClicked", async (e) => {
-        if (e.detail.lazy && e.detail.id) {
-          this.loadReferencesCallback(e.detail.id, true)
-            .then(result => {
-            this.referencesTo = result;
-          })
-            .catch(() => {
-            // to do
-          });
-        }
-      });
-      /* 'selectionChanged' Event: Fired when a new tree item was selected.*/
-      this.referencesToEl.addEventListener("selectionChanged", (e) => {
-        this.selectReferenceCallback(e.detail.id);
-        /* Returns void Promise*/
-      });
-      /* 'doubleClicked' Event: Fired when a tree item was double-clicked.*/
-      this.referencesToEl.addEventListener("doubleClicked", (e) => {
-        this.openObjectCallback(e.detail.id);
-        /* Returns void Promise*/
-      });
-    };
-    /**
-     * @description This handler gets fired every time the value of the 'Select Object' ch-suggest changes. Then, it calls the 'updateSuggestedObjects' method, that keeps the state of the last suggested objects that were passed bu the host. Also, it shows the suggested objects on the ch-suggest box.
+     * This handler gets fired every time the value of the 'Select Object' ch-suggest changes. Then, it calls the 'updateSuggestedObjects' method, that keeps the state of the last suggested objects that were passed bu the host. Also, it shows the suggested objects on the ch-suggest box.
      */
     this.selectObjectValueChangedHandler = async (e) => {
       const value = e.detail;
@@ -200,55 +146,131 @@ const GxIdeReferences = class {
       /* Returns an empty Promise*/
     };
     /**
-     * @description handler that gets fired when the use clicks on the ch-suggest button (...)
+     * handler that gets fired when the use clicks on the ch-suggest button (...)
      */
     this.openSelectorDialogCallbackHandler = async () => {
-      this.selectedObject = await this.openSelectorDialogCallback();
+      this.openSelectorDialogCallback()
+        .then(result => {
+        this.selectedObject = result;
+      })
+        .catch(() => {
+        /* to do */
+      });
     };
     /**
-     * @description It evaluates if loadReferencesCallback should be called, depending wether there is or not an actual selected object.
+     * It evaluates if loadReferencesCallback should be called, depending wether there is or not an actual selected object.
      */
     this.evaluateInitialReferenceData = () => {
-      var _a;
-      const selectedObjectId = (_a = this.selectedObject) === null || _a === void 0 ? void 0 : _a.id;
-      selectedObjectId && this.loadReferencesHandler(selectedObjectId);
+      if (this.selectedObject) {
+        this.selectedObjectHandler(this.selectedObject);
+      }
     };
     /**
-     * @description This method invokes 'loadReferencesCallback' callback for 'Is Referenced By' and 'Has References To' panels.
+     * This method invokes 'loadReferencesCallback' callback for 'Is Referenced By' and 'Has References To' panels. The second parameter "to" indicates if loadReferencesCallback callback should be called for "has references to" or "is references by"
      */
-    this.loadReferencesHandler = async (id) => {
-      /* Referenced By*/
+    this.loadReferencesHandler = async (id, to = false) => {
       if (this.loadReferencesCallback) {
-        this.loadReferencesCallback(id, false)
-          .then(result => {
-          this.referencedBy = result;
-        })
-          .catch(() => {
-          /* To do*/
-        });
+        /* 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*/
+          });
+        }
       }
-      /* References To*/
-      if (this.loadReferencesCallback) {
-        this.loadReferencesCallback(id, true)
+    };
+    /**
+     * It hides/show the bar (The header bottom section).
+     */
+    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;
+      }
+    };
+    /**
+     * 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 => {
-          this.referencesTo = 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*/
         });
       }
+      else {
+        updatedTreeModel = updateTreeModel(this.getRef(to), nodeData, nodeId);
+        this.updateRef(to, updatedTreeModel);
+      }
     };
-    /**
-     * @description It hides/show the bar (The header bottom section).
-     */
-    this.hideBarButtonClickedHandler = () => {
-      this.barHidden = !this.barHidden;
-    };
+    this.referencedByTreeData = undefined;
+    this.referencesToTreeData = undefined;
     this.barHidden = false;
     this.objectsSuggestions = undefined;
     this.referencedBy = undefined;
     this.referencesTo = undefined;
-    this.hideTopBar = false;
     this.selectedObject = undefined;
     this.selectorSourceCallback = undefined;
     this.loadReferencesCallback = undefined;
@@ -257,7 +279,12 @@ const GxIdeReferences = class {
     this.selectReferenceCallback = undefined;
   }
   selectedObjectHandler(newSelectedObject) {
-    this.loadReferencesHandler(newSelectedObject.id);
+    if (newSelectedObject.id) {
+      /* update "is referenced by*/
+      this.loadReferencesHandler(newSelectedObject.id, false);
+      /* update "has references to*/
+      this.loadReferencesHandler(newSelectedObject.id, true);
+    }
   }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
@@ -266,8 +293,6 @@ const GxIdeReferences = class {
   }
   componentDidLoad() {
     this.attachSelectObjectListener();
-    this.attachReferencedByListeners();
-    this.attachReferencesToListeners();
   }
   componentDidRender() {
     this.componentDidRenderEvent.emit(this._componentLocale.componentName);
@@ -275,12 +300,12 @@ const GxIdeReferences = class {
   // 10.RENDER() FUNCTION //
   render() {
     var _a, _b, _c, _d, _e, _f;
-    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, 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.id, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest" }, 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: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, 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.id, onValueChanged: this.selectObjectValueChangedHandler, ref: el => (this.selectObjectSuggestEl = el), part: "object-selector-suggest" }, 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" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, justifyContent: "center", part: "referenced-by-container" }, h("gxg-tree", { ref: el => (this.referencedByEl = el), class: { "gxi-hidden": !((_a = this.referencedBy) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: false, part: "referenced-by-tree" }, renderTreeItems(convertReferenceDataToTreeData(this.referencedBy))), !((_b = this.referencedBy) === 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.referencedBy) === 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" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, justifyContent: "center", fullHeight: true, part: "referenced-by-container" }, h("gxg-tree", { class: { "gxi-hidden": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length) }, checkbox: true, 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
       ? this._componentLocale.main.isReferencedByEmpty
-      : this._componentLocale.main.isReferencedByError))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, justifyContent: "center", part: "references-to-container" }, h("gxg-tree", { ref: el => (this.referencesToEl = el), class: { "gxi-hidden": !((_d = this.referencesTo) === null || _d === void 0 ? void 0 : _d.length) }, checkbox: false, part: "references-to-tree" }, renderTreeItems(convertReferenceDataToTreeData(this.referencesTo))), !((_e = this.referencesTo) === 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.referencesTo) === null || _f === void 0 ? void 0 : _f.length) === 0
+      : this._componentLocale.main.isReferencedByError))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, justifyContent: "center", fullHeight: true, 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.hasReferencesEmpty
       : this._componentLocale.main.hasReferencesToError)))))));
   }

package/dist/esm/gx-ide-template.entry.js

@@ -7,7 +7,7 @@ const GxIdeTemplate = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
-    this.hideTopBar = false;
+    this.mainTile = undefined;
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
@@ -21,7 +21,7 @@ const GxIdeTemplate = class {
   // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, !this.hideTopBar ? (h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { fullHeight: true, "container-title": "Header Title" }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gx-ide-container", { fullHeight: true, "container-title": "Header Title" }, h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), h("gxg-button", { slot: "footer" }, "Create")))));
   }
   static get assetsDirs() { return ["gx-ide-assets/template"]; }
   get el() { return getElement(this); }

package/dist/esm/gx-ide-test.entry.js

@@ -1,11 +1,13 @@
 import { r as registerInstance, h, H as Host } from './index-4f0a5746.js';
-import { r as renderTreeItems } from './render-tree-fc8636a3.js';
+import { u as updateTreeModel, r as renderTreeItems } from './update-tree-model-80419058.js';
 
 const testCss = ":host{display:block}";
 
 const GxIdeUiTest = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
     /* Gxg-Tree Methods*/
     this.closeTreeNodeHandler = () => {
       this.tree.toggleItems(["number-1-1-2"], false);
@@ -31,9 +33,36 @@ const GxIdeUiTest = class {
     this.deleteNodeHandler = () => {
       this.treeModel = [];
     };
+    /* Update model test*/
+    // private showTree = () => {
+    //   this.treeModel = [];
+    // };
+    // private updateTree = () => {
+    //   this.treeModel = [];
+    // };
+    this.treeItemStateChangedHandler = (e) => {
+      // const event = e.detail.emittedBy;
+      const nodeData = e.detail.itemData;
+      const nodeId = e.detail.itemData.id;
+      if (nodeData.lazy) {
+        this.updateLazyCallback(nodeId).then(children => {
+          if (children === null || children === void 0 ? void 0 : children.length) {
+            const updatedTreeModel = updateTreeModel(this.treeModel, { id: nodeId, label: nodeData.label, items: children }, nodeId);
+            this.treeModel = updatedTreeModel;
+          }
+        });
+      }
+    };
     this.treeModel = undefined;
+    this.lazyNode = undefined;
+    this.updateLazyCallback = undefined;
+    this.newNode = undefined;
+    this.testUpdateNode = false;
     this.lazyLoadTreeItemsCallback = undefined;
   }
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE METHODS //
+  // 7.LISTENERS //
   loadLazyChildrenHandler(e) {
     const treeItemId = e.detail;
     if (this.lazyLoadTreeItemsCallback) {
@@ -45,9 +74,17 @@ const GxIdeUiTest = class {
       }, 1000);
     }
   }
+  treeItemStateChanged(event) {
+    const updatedTreeModel = updateTreeModel(this.treeModel, event.detail, event.detail.id);
+    console.log("updatedTreeModel", updatedTreeModel);
+  }
+  // 10.RENDER() FUNCTION //
   render() {
-    if (this.treeModel) {
-      return (h(Host, null, h("gxg-tree", { id: "masterTree", checked: true, checkbox: true, multiSelection: true, ref: el => (this.tree = el) }, renderTreeItems(this.treeModel)), ",", h("div", { class: "tree-buttons" }, h("gxg-button", { type: "outlined", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.getSelectedItemsHandler }, "Get Selected Items"), h("gxg-button", { type: "outlined", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), h("gxg-button", { type: "outlined", onClick: this.deleteNodeHandler }, "Delete Tree"))));
+    if (!this.testUpdateNode && this.treeModel) {
+      return (h(Host, null, h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el) }, renderTreeItems(this.treeModel)), ",", h("div", { class: "tree-buttons" }, h("gxg-button", { type: "outlined", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.getSelectedItemsHandler }, "Get Selected Items"), h("gxg-button", { type: "outlined", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), h("gxg-button", { type: "outlined", onClick: this.deleteNodeHandler }, "Delete Tree"))));
+    }
+    else if (this.testUpdateNode) {
+      return (h(Host, null, h("gxg-tree", { checked: true, checkbox: true, multiSelection: true, ref: (el) => (this.tree = el), onTreeItemStateChanged: this.treeItemStateChangedHandler }, renderTreeItems(this.treeModel))));
     }
     else {
       return h("slot", null);

package/dist/esm/{gxg-form-radio-group.entry.js → gx-ide-top-bar_2.entry.js}

@@ -1,7 +1,37 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-4f0a5746.js';
 import { f as formMessageLogic, r as requiredLabel } from './form-73d85602.js';
 import { f as formClasses } from './classesNames-6cd8fadb.js';
 
+const topBarCss = ":host{display:block;box-sizing:border-box}.wrapper{display:flex;justify-content:space-between;padding:var(--spacing-comp-01) var(--spacing-comp-02);transition:background-color var(--gx-ide-timing-super-fast-ms);background-color:var(--gray-01)}gxg-title::part(title){color:var(--color-on-secondary);transition:color var(--gx-ide-timing-super-fast-ms)}";
+
+const GxIdeTopBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.topBarTitle = undefined;
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.METHODS //
+  componentWillLoad() {
+    this.evaluateSlots();
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  evaluateSlots() {
+    // header
+    const menuSlot = this.el.querySelectorAll('[slot="menu"]');
+    if (menuSlot.length) {
+      this._hasMenuSlot = true;
+    }
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, null, h("div", { class: "wrapper", part: "wrapper" }, h("div", { class: "wrapper__left", part: "wrapper-left" }, h("gxg-title", { type: "title-04", exportparts: "title: gxg-title" }, this.topBarTitle)), h("div", { class: "wrapper__right", part: "wrapper-right" }, this._hasMenuSlot ? (h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-vertical" }, h("slot", { name: "menu" }))) : null))));
+  }
+  get el() { return getElement(this); }
+};
+GxIdeTopBar.style = topBarCss;
+
 const formRadioGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:block}:host .label{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;margin-bottom:var(--spacing-lay-xs);display:inline-block;margin-bottom:var(--spacing-comp-02)}:host .radios-wrapper{display:flex;flex-direction:column;gap:var(--gxg-form-control-gap--vertical)}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.gxg-form-radio-group--row) .radios-wrapper{flex-direction:row;gap:var(--gxg-form-control-gap--horizontal);align-items:center}:host .required{padding-left:2px}";
 
 const GxgFormRadioGroup = class {
@@ -205,4 +235,4 @@ const GxgFormRadioGroup = class {
 };
 GxgFormRadioGroup.style = formRadioGroupCss;
 
-export { GxgFormRadioGroup as gxg_form_radio_group };
+export { GxIdeTopBar as gx_ide_top_bar, GxgFormRadioGroup as gxg_form_radio_group };

package/dist/esm/gxg-combo-box_8.entry.js

@@ -7,7 +7,7 @@ import { s as state } from './store-75f5d491.js';
 import { c as commonClassesNames, f as formClasses } from './classesNames-6cd8fadb.js';
 
 function mutationObserverRemoved(target, ref) {
-    const observer = new MutationObserver((mutationsList, observer) => {
+    const observer = new MutationObserver((mutationsList) => {
         for (const mutation of mutationsList) {
             if (mutation.type === "childList") {
                 const removedNodesArray = Array.from(mutation.removedNodes);
@@ -439,7 +439,7 @@ const GxgComboBox = class {
     this.value = event.detail.value;
     this.inputText.focus();
   }
-  itemDidLoadHandler(itemLoaded) {
+  itemDidLoadHandler() {
     this.setIndexes();
     this.setInitialValue();
   }
@@ -592,7 +592,7 @@ const GxgComboBox = class {
         large: state.large,
       }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
         "main-container": true,
-      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.inputTextIcon, iconPosition: this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
+      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: this.fixedIcon ? "start" : this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
         "items-container": true,
         "items-container--show": this.listIsOpen,
         "items-container--no-match": this.noMatch,
@@ -799,11 +799,6 @@ const GxgFormRadio = class {
   /*********************************
   METHODS
   *********************************/
-  componentDidLoad() {
-    this.radioInput.addEventListener("change", (e) => {
-      console.log("changed", e);
-    });
-  }
   checkedHandler(newValue) {
     if (newValue) {
       this.radioChecked.emit({

package/dist/esm/gxg-menu.entry.js

@@ -105,7 +105,7 @@ const GxgMenu = class {
     this.removeMouseEnter = () => {
       this.el.removeEventListener("mouseenter", this.detectMouseEnter);
     };
-    this.detectMouseEnter = (e) => {
+    this.detectMouseEnter = () => {
       //Mouse enter
       this.clearMouseOutTimeout();
     };
@@ -183,7 +183,7 @@ const GxgMenu = class {
   }
   keyboardNavigationHandler(triggeredItem) {
     const triggeringItem = triggeredItem.detail.ref;
-    const triggeringItemIndex = this._enabledItems.findIndex((item, i) => {
+    const triggeringItemIndex = this._enabledItems.findIndex((item) => {
       return item === triggeringItem;
     });
     let newFocusedItem;