@genexus/genexus-ide-ui 1.1.61 → 1.1.62

package/dist/collection/components/modules/manage-module-references/manage-module-references.js

@@ -5,141 +5,243 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
         throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _GxManageModuleReferences_filterIcon, _GxManageModuleReferences_moduleIcon;
-/* STENCIL IMPORTS */
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxManageModuleReferences_componentLocale, _GxManageModuleReferences_moduleVersionsMap, _GxManageModuleReferences_modulesMap, _GxManageModuleReferences_modulesJustFetched, _GxManageModuleReferences_searchModulesFilterValue, _GxManageModuleReferences_modulesGrid, _GxManageModuleReferences_progressBarEl, _GxManageModuleReferences_segmentedControlModel, _GxManageModuleReferences_clearAll, _GxManageModuleReferences_filterModules, _GxManageModuleReferences_getActionFromCurrentModuleVersion, _GxManageModuleReferences_handleFilterChangeHandler, _GxManageModuleReferences_handleModuleChange, _GxManageModuleReferences_moduleActionHandler, _GxManageModuleReferences_moduleTypeButtonClicked, _GxManageModuleReferences_moduleVersionsValueChangedHandler, _GxManageModuleReferences_onProgress, _GxManageModuleReferences_progressBarCloseHandler, _GxManageModuleReferences_reloadServer, _GxManageModuleReferences_renderEmptyStateModules, _GxManageModuleReferences_renderInstalledVersion, _GxManageModuleReferences_renderModuleVersions, _GxManageModuleReferences_renderModulesGrid, _GxManageModuleReferences_renderVersionName, _GxManageModuleReferences_renderVersionWarningMessage, _GxManageModuleReferences_serverSelectedCallbackHandler, _GxManageModuleReferences_serverValueChangedHandler, _GxManageModuleReferences_showModuleMenu;
+// Stencil
 import { Host, h } from "@stencil/core";
 import { getIconPath } from "@genexus/mercury";
-import { renderModuleDataProperties } from "../../../common/common";
+import { mapModuleServerDataToComboBoxModel, mapModuleVersionDataToComboBoxModel, renderModuleDataProperties } from "./helpers";
+import { config } from "../../../common/config";
 import { Locale } from "../../../common/locale";
+import { hiChar } from "../../../common/helpers";
 const CSS_BUNDLES = [
     "resets/box-sizing",
-    // "utils/form",
-    // "utils/layout",
-    // "utils/typography",
-    // "components/button",
-    // "components/checkbox",
-    // "components/edit",
-    "components/tabular-grid"
+    "utils/form",
+    "utils/layout",
+    "utils/typography",
+    "components/button",
+    "components/icon",
+    "components/combo-box",
+    "components/edit",
+    "components/tabular-grid",
+    "components/segmented-control",
+    "chameleon/scrollbar",
+    "utils/spacing"
 ];
+// icons
+const SHOW_MORE_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "show-more-horizontal",
+    colorType: "primary"
+});
+const RESET_ICON = getIconPath({
+    category: "gemini-tools",
+    name: "reset",
+    colorType: "primary"
+});
+const MODULE_ICON = getIconPath({
+    category: "objects",
+    name: "module"
+});
+const FILTER_ICON = getIconPath({
+    category: "system",
+    name: "filters",
+    colorType: "on-elevation"
+});
+const MVS = "__"; // The separator between module-id, and module-version-id
 export class GxManageModuleReferences {
     constructor() {
-        this.renderedFirstTime = false;
-        _GxManageModuleReferences_filterIcon.set(this, getIconPath({
-            category: "system",
-            name: "filters",
-            colorType: "on-elevation"
-        }));
-        _GxManageModuleReferences_moduleIcon.set(this, getIconPath({
-            category: "objects",
-            name: "module"
-        }));
-        // 9.LOCAL METHODS //
-        this.updateModulesSelectedVersion = (modulesAll) => {
-            if (this.selectedServerId !== this.selectedServerIdOnModulesAllUpdate) {
-                // the server has changed. clear the updateModulesSelectedVersion
-                this.modulesSelectedVersion.clear();
-                modulesAll.forEach(module => {
-                    // this.modulesSelectedVersion.set(module.id, module.versions[0].id);
-                    this.modulesSelectedVersion.set(module.id, module.versions[module.versions.length - 1].id);
+        _GxManageModuleReferences_componentLocale.set(this, void 0);
+        /**
+         * #moduleVersionsMap maps a module version (identified as module-id + version-id), with the ModuleVersionData
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxManageModuleReferences_moduleVersionsMap.set(this, new Map());
+        /**
+         * maps a module-id, with the module current installed version, and the list of versions as a ComboBoxModel representation.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxManageModuleReferences_modulesMap.set(this, new Map());
+        // #modulesJustFetched is used to select the current module on componentDidRender
+        _GxManageModuleReferences_modulesJustFetched.set(this, false);
+        _GxManageModuleReferences_searchModulesFilterValue.set(this, void 0);
+        _GxManageModuleReferences_modulesGrid.set(this, void 0);
+        _GxManageModuleReferences_progressBarEl.set(this, void 0);
+        _GxManageModuleReferences_segmentedControlModel.set(this, []);
+        _GxManageModuleReferences_clearAll.set(this, () => {
+            __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").clear();
+            __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").clear();
+        });
+        _GxManageModuleReferences_filterModules.set(this, () => {
+            let filteredModules;
+            // 1. Filter by type first
+            // browse
+            if (this.selectedModuleType === "browse") {
+                filteredModules = this.modulesAll;
+            }
+            // installed
+            else if (this.selectedModuleType === "installed") {
+                filteredModules = this.modulesAll.filter((module) => {
+                    // if the module has a currentVersion (not undefined) it means it is installed
+                    return module.currentVersion;
                 });
             }
-            else {
-                // the server has't changed. only add the module to the map, if it is a new module.
-                modulesAll.forEach(module => {
-                    const newModule = this.modulesSelectedVersion.get(module.id) === undefined;
-                    if (newModule) {
-                        this.modulesSelectedVersion.set(module.id, module.versions[0].id);
-                    }
+            else if (this.selectedModuleType === "updates") {
+                filteredModules = this.modulesAll.filter((module) => {
+                    return module.versions.find(version => version.action === "update");
                 });
             }
-            this.selectedServerIdOnModulesAllUpdate = this.selectedServerId;
-        };
-        this.getActionFromCurrentModuleVersion = () => {
-            const action = this.getModuleData(this.selectedModule, "action");
+            // 2. Then filter by user input
+            if (__classPrivateFieldGet(this, _GxManageModuleReferences_searchModulesFilterValue, "f")) {
+                filteredModules = filteredModules.filter(module => {
+                    const moduleSelectedVersion = __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").get(`${module.id}${MVS}${__classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(module.id).currentSelectedVersion}`);
+                    const moduleSelectedVersionName = moduleSelectedVersion.name.toLowerCase();
+                    const moduleSelectedVersionDescription = moduleSelectedVersion.description.toLowerCase();
+                    return ((moduleSelectedVersionName === null || moduleSelectedVersionName === void 0 ? void 0 : moduleSelectedVersionName.includes(__classPrivateFieldGet(this, _GxManageModuleReferences_searchModulesFilterValue, "f"))) ||
+                        (moduleSelectedVersionDescription === null || moduleSelectedVersionDescription === void 0 ? void 0 : moduleSelectedVersionDescription.includes(__classPrivateFieldGet(this, _GxManageModuleReferences_searchModulesFilterValue, "f"))));
+                });
+            }
+            this.filteredModules = filteredModules;
+        });
+        _GxManageModuleReferences_getActionFromCurrentModuleVersion.set(this, () => {
+            const action = __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").get(`${this.selectedModuleId}${MVS}${__classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId).currentSelectedVersion}`).action;
             return action || "install";
-        };
+        });
+        _GxManageModuleReferences_handleFilterChangeHandler.set(this, (event) => {
+            const searchValue = event.detail.trim().toLowerCase();
+            __classPrivateFieldSet(this, _GxManageModuleReferences_searchModulesFilterValue, searchValue, "f");
+            __classPrivateFieldGet(this, _GxManageModuleReferences_filterModules, "f").call(this);
+        });
+        _GxManageModuleReferences_handleModuleChange.set(this, (event) => {
+            this.selectedModuleId = event.detail.rowsId[0];
+            // update selected versions comboBox model
+            const selectedModuleVersionsInfoArray = __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId).comboBoxVersionsModel;
+            this.selectedModuleVersions = selectedModuleVersionsInfoArray.map(versionInfo => {
+                return {
+                    caption: versionInfo.value,
+                    value: versionInfo.value
+                };
+            });
+        });
+        /**
+         * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxManageModuleReferences_moduleActionHandler.set(this, (module) => async () => {
+            await __classPrivateFieldGet(this, _GxManageModuleReferences_progressBarEl, "f").reset(); // sets the progress bar to 0
+            this.executeActionCallbackInProgress = true;
+            this.actionInProgress = true;
+            const moduleSelectedVersionId = __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId).currentSelectedVersion;
+            const actionSuccessful = await this.executeActionCallback(this.selectedServerId, module.id, moduleSelectedVersionId, __classPrivateFieldGet(this, _GxManageModuleReferences_getActionFromCurrentModuleVersion, "f").call(this), __classPrivateFieldGet(this, _GxManageModuleReferences_onProgress, "f"));
+            this.executeActionCallbackInProgress = false;
+            if (actionSuccessful) {
+                __classPrivateFieldGet(this, _GxManageModuleReferences_serverSelectedCallbackHandler, "f").call(this, this.selectedServerId, false);
+            }
+        });
+        _GxManageModuleReferences_moduleTypeButtonClicked.set(this, (event) => {
+            this.selectedModuleType = event.detail;
+            __classPrivateFieldGet(this, _GxManageModuleReferences_filterModules, "f").call(this);
+        });
+        _GxManageModuleReferences_moduleVersionsValueChangedHandler.set(this, (event) => {
+            const versionId = event.detail;
+            const currentModuleMapValue = __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId);
+            currentModuleMapValue.currentSelectedVersion = versionId.toString();
+            __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").set(this.selectedModuleId, currentModuleMapValue);
+            this.reRenderCounter++;
+        });
         /**
          * Callback invoked to get the progress when module is performing an action
          */
-        this.onProgress = (message, progress, state) => {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxManageModuleReferences_onProgress.set(this, (message, progress, state) => {
             const data = { message, progress, state };
             this.selectedModuleAction = Object.assign({}, data);
             this.progressValue = this.selectedModuleAction.progress;
             this.progressState = this.selectedModuleAction.state;
-        };
-        // 10.LOCAL METHODS //
-        /**
-         * Used for changing the selected module
-         */
-        this.handleModuleChange = (event) => {
-            const selectedModuleId = event.detail.rowsId[0];
-            const foundModule = this.modulesAll.find(item => item.id === selectedModuleId);
-            if (foundModule) {
-                this.selectedModule = foundModule;
+        });
+        _GxManageModuleReferences_progressBarCloseHandler.set(this, () => { });
+        _GxManageModuleReferences_reloadServer.set(this, () => {
+            __classPrivateFieldGet(this, _GxManageModuleReferences_serverSelectedCallbackHandler, "f").call(this, this.selectedServerId, true);
+        });
+        _GxManageModuleReferences_renderEmptyStateModules.set(this, () => {
+            return (h("gx-ide-empty-state", { isAnimated: true, stateIconSrc: FILTER_ICON, stateTitle: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modules.noModulesFilter }));
+        });
+        _GxManageModuleReferences_renderInstalledVersion.set(this, () => {
+            const currentInstalledVersion = __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId).currentInstalledVersion;
+            let caption;
+            let cssClass = "module-info__action-container";
+            if (currentInstalledVersion) {
+                caption = `${__classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modulesInformation.moduleProperties.installed}: ${currentInstalledVersion}`;
+                cssClass += ` module-info__action-container--installed`;
             }
-        };
-        /**
-         * Change the server selected value in response to callbackServerSelected callback
-         */
-        this.serverSelectedCallbackHandler = async (id, reload) => {
+            else {
+                caption =
+                    __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modulesInformation.moduleProperties.notInstalled;
+            }
+            return (h("div", { class: cssClass }, h("p", { class: "body-regular-m" }, caption)));
+        });
+        _GxManageModuleReferences_renderModuleVersions.set(this, () => {
+            const currentSelectedModule = __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId);
+            const selectedVersionValue = currentSelectedModule.currentSelectedVersion;
+            const moduleSelectedVersion = __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").get(`${this.selectedModuleId}${MVS}${__classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId).currentSelectedVersion}`);
+            const moduleSelectedVersionAction = moduleSelectedVersion.action;
+            return (h("div", { class: "field field-block available-versions" }, h("label", { class: "label", htmlFor: "available-versions" }, __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").availableVersions), h("div", { class: "buttons-spacer combo-and-button" }, h("ch-combo-box-render", { id: "available-versions", class: "combo-box versions", value: selectedVersionValue, onInput: __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsValueChangedHandler, "f"), disabled: this.loadingServer, model: this.selectedModuleVersions }), h("button", { class: "button-primary button-status", disabled: this.executeActionCallbackInProgress ||
+                    moduleSelectedVersionAction === "incompatible" ||
+                    moduleSelectedVersionAction === "not-installable", onClick: __classPrivateFieldGet(this, _GxManageModuleReferences_moduleActionHandler, "f").call(this, currentSelectedModule.moduleData) }, __classPrivateFieldGet(this, _GxManageModuleReferences_getActionFromCurrentModuleVersion, "f").call(this)))));
+        });
+        _GxManageModuleReferences_renderModulesGrid.set(this, () => {
+            return (h("ch-tabular-grid", {
+                // TODO: Evaluate if the tabular-grid is the right tool for this job.
+                rowSelectionMode: "single", part: "ch-grid-pending-commits", class: "tabular-grid scrollable", onSelectionChanged: __classPrivateFieldGet(this, _GxManageModuleReferences_handleModuleChange, "f"), ref: el => (__classPrivateFieldSet(this, _GxManageModuleReferences_modulesGrid, el, "f"))
+            }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { class: "tabular-grid-column", settingable: false, size: config.tabularGrid.colSize.common })), this.filteredModules.length ? (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, this.filteredModules.map((module) => {
+                const moduleIsInstalled = module.currentVersion;
+                const moduleSelectedVersion = __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").get(`${module.id}${MVS}${__classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(module.id).currentSelectedVersion}`);
+                const moduleSelectedVersionName = moduleSelectedVersion.name;
+                const moduleSelectedVersionDescription = moduleSelectedVersion.description;
+                return (h("ch-tabular-grid-row", {
+                    // TODO: Replace tabular grid with other control, since it does not makes sense to use a grid with only one column.
+                    class: "tabular-grid-row", rowid: module.id, key: module.id
+                }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("div", { class: "module-grid-item-info field-group" }, h("ch-image", { class: "icon-md module-icon", src: MODULE_ICON, disabled: !moduleIsInstalled }), h("div", { class: "field field-block" }, h("h6", { class: "subtitle-semi-bold-xs" }, hiChar(moduleSelectedVersionName, __classPrivateFieldGet(this, _GxManageModuleReferences_searchModulesFilterValue, "f"))), h("p", { class: "body-regular-s" }, hiChar(moduleSelectedVersionDescription, __classPrivateFieldGet(this, _GxManageModuleReferences_searchModulesFilterValue, "f"))))))));
+            }))) : (h("ch-tabular-grid-rowset", { class: "tabular-grid-rowset" }, h("ch-tabular-grid-rowset-empty", null, __classPrivateFieldGet(this, _GxManageModuleReferences_renderEmptyStateModules, "f").call(this))))));
+        });
+        /* module details/information renders*/
+        _GxManageModuleReferences_renderVersionName.set(this, () => {
+            const moduleSelectedVersion = __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").get(`${this.selectedModuleId}${MVS}${__classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId).currentSelectedVersion}`);
+            const selectedModule = __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId);
+            const moduleIsInstalled = selectedModule.currentInstalledVersion;
+            return (h("div", { class: "module-info__title" }, h("ch-image", { class: "icon-md module-info__icon", src: MODULE_ICON, disabled: !moduleIsInstalled }), h("h6", { class: "subtitle-semi-bold-xs" }, moduleSelectedVersion.name)));
+        });
+        _GxManageModuleReferences_renderVersionWarningMessage.set(this, () => {
+            const moduleVersionWarningMessage = __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").get(`${this.selectedModuleId}${MVS}${__classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId).currentSelectedVersion}`).warningMessage;
+            if (moduleVersionWarningMessage) {
+                return (h("p", { class: "module-info__alert-message" }, moduleVersionWarningMessage));
+            }
+        });
+        _GxManageModuleReferences_serverSelectedCallbackHandler.set(this, async (id, reload) => {
             if (this.serverSelectedCallback) {
+                this.selectedServerId = id;
                 this.loadingServer = true;
                 const resolvedObjects = await this.serverSelectedCallback(id, reload);
-                this.selectedServerId = id;
                 this.modulesAll = [...resolvedObjects];
-                this.filterModulesByType("browse");
-                this.selectedModule = this.filteredModules[0];
                 this.loadingServer = false;
             }
-        };
-        this.handleFilterChange = (value) => {
-            value = value.trim().toLowerCase();
-            if (value) {
-                this.filteredModules = this.modulesAll.filter(module => {
-                    const selectedVersionName = this.getModuleData(module, "name");
-                    return selectedVersionName === null || selectedVersionName === void 0 ? void 0 : selectedVersionName.toLowerCase().includes(value);
-                });
-            }
-            else {
-                this.filteredModules = this.modulesAll;
-            }
-        };
-        this.handleFilterChangeHandler = (e) => {
-            const value = e.detail;
-            return this.handleFilterChange(value);
-        };
-        /**
-         * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback
-         */
-        this.executeActionCallbackHandler = async (module) => {
-            if (this.executeActionCallback) {
-                const moduleSelectedVersionId = this.modulesSelectedVersion.get(module.id);
-                const actionCompleted = await this.executeActionCallback(this.selectedServerId, module.id, moduleSelectedVersionId, this.getActionFromCurrentModuleVersion(), this.onProgress);
-                if (actionCompleted) {
-                    this.serverSelectedCallbackHandler(this.selectedServerId, false);
-                }
-                this.actionCompleted = actionCompleted;
-            }
-        };
-        this.filterModulesByType = (type) => {
-            // browse
-            if (type === "browse") {
-                this.filteredModules = this.modulesAll;
-            }
-            // installed
-            else if (type === "installed") {
-                this.filteredModules = this.modulesAll.filter((module) => {
-                    // if the module has a currentVersion (not undefined) it means it is installed
-                    return module.currentVersion;
-                });
-            }
-            else if (type === "updates") {
-                this.filteredModules = this.modulesAll.filter((module) => {
-                    return module.versions.find(version => version.action === "update");
-                });
-            }
-        };
-        this.showModuleMenu = async (e) => {
+        });
+        _GxManageModuleReferences_serverValueChangedHandler.set(this, (event) => {
+            this.selectedModuleId = undefined; // clear selected module
+            __classPrivateFieldSet(this, _GxManageModuleReferences_searchModulesFilterValue, "", "f"); // clear filter
+            this.selectedModuleType = "browse"; // set "browse" as the default selected type
+            const serverId = event.detail;
+            __classPrivateFieldGet(this, _GxManageModuleReferences_serverSelectedCallbackHandler, "f").call(this, serverId, false);
+        });
+        _GxManageModuleReferences_showModuleMenu.set(this, async (e) => {
             if (this.serverContextMenuCallback) {
                 const buttonBoundingClientRect = e.target.getBoundingClientRect();
                 await this.serverContextMenuCallback({
@@ -148,181 +250,135 @@ export class GxManageModuleReferences {
                     clientY: buttonBoundingClientRect.y
                 });
             }
-        };
-        this.getModuleData = (module, dataType) => {
-            const selectedVersionId = this.modulesSelectedVersion.get(module.id);
-            let selectedVersion;
-            let selectedVersionData;
-            if (selectedVersionId) {
-                selectedVersion = module.versions.find(version => version.id === selectedVersionId);
-            }
-            if (selectedVersion) {
-                selectedVersionData = selectedVersion[dataType];
-            }
-            return selectedVersionData;
-        };
-        this.moduleActionHandler = (module) => () => {
-            this.actionCompleted = false;
-            this.closeProgressBar = false;
-            this.executeActionCallbackHandler(module);
-        };
-        this.renderModulesGrid = () => {
-            return (h("ch-tabular-grid", { rowSelectionMode: "single", part: "ch-grid-pending-commits", class: "tabular-grid servers-detail no-border", onSelectionChanged: this.handleModuleChange }, h("ch-tabular-grid-columnset", { class: "tabular-grid-column-set" }, h("ch-tabular-grid-column", { class: "tabular-grid-column", settingable: false, size: "min-content" }), h("ch-tabular-grid-column", { class: "tabular-grid-column", settingable: false }), h("ch-tabular-grid-column", { class: "tabular-grid-column", settingable: false, size: "min-content" })), this.filteredModules.map((module) => (h("ch-tabular-grid-row", { class: "tabular-grid-row", rowid: module.id, key: module.id, selected: this.selectedModule && this.selectedModule.id === module.id }, h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, h("gxg-icon", { type: "objects/module", "data-action": this.moduleVersionIconColor(module), color: this.moduleVersionIconColor(module), size: "small" })), h("ch-tabular-grid-cell", { class: "tabular-grid-cell grid-cell-module__info" }, h("span", { class: "grid-cell-module__name" }, this.getModuleData(module, "name")), h("span", { class: "grid-cell-module__description" }, this.getModuleData(module, "description"))), h("ch-tabular-grid-cell", { class: "tabular-grid-cell" }, this.selectedModule && this.selectedModule.id === module.id ? (h("div", { class: "button-wrapper" }, h("gxg-button", { disabled: !this.actionCompleted ||
-                    this.getModuleData(module, "action") === "incompatible" ||
-                    this.getModuleData(module, "action") === "not-installable", fit: true, part: "module-action", onClick: this.moduleActionHandler(module) }, this.getActionFromCurrentModuleVersion()))) : null))))));
-        };
-        this.renderEmptyStateModules = () => {
-            return (h("gx-ide-empty-state", { stateIconSrc: __classPrivateFieldGet(this, _GxManageModuleReferences_filterIcon, "f"), stateTitle: this._componentLocale.modules.noModulesFilter }));
-        };
-        this.moduleVersionIconColor = (module) => {
-            const moduleAction = this.getModuleData(module, "action");
-            const moduleCurrentVersion = module.currentVersion;
-            if (moduleAction === "not-installable" || moduleAction === "incompatible") {
-                return "warning";
-            }
-            else if (!moduleCurrentVersion) {
-                return "mercury-primary-disabled";
-            }
-            else {
-                return "mercury-primary";
-            }
-        };
-        /* module details/information renders*/
-        this.renderVersionName = () => {
-            return (h("gxg-title", { part: "module-info__name", type: "title-05" }, h("div", { class: "module-info__name" }, this.getModuleData(this.selectedModule, "name"))));
-        };
-        this.renderVersionWarningMessage = () => {
-            const warningMessage = this.getModuleData(this.selectedModule, "warningMessage");
-            if (warningMessage) {
-                return h("p", { class: "module-info__alert-message" }, warningMessage);
-            }
-        };
-        this.renderInstalledVersion = () => {
-            const currentVersion = this.selectedModule.currentVersion;
-            let caption;
-            let cssClass = "module-info__action-container";
-            if (currentVersion) {
-                caption = `${this._componentLocale.modulesInformation.moduleProperties.installed}: ${currentVersion}`;
-                cssClass += ` module-info__action-container--installed`;
-            }
-            else {
-                caption =
-                    this._componentLocale.modulesInformation.moduleProperties.notInstalled;
-            }
-            return (h("div", { class: cssClass }, h("gxg-text", { part: "module-info__action" }, caption)));
-        };
-        this.moduleVersionsValueChangedHandler = (e) => {
-            const versionId = e.detail;
-            this.updateSelectedModuleVersion(versionId);
-        };
-        this.moduleVersionsItemChangedHandler = (e) => {
-            const versionId = e.detail.value;
-            this.updateSelectedModuleVersion(versionId);
-        };
-        this.updateSelectedModuleVersion = (versionId) => {
-            if (versionId) {
-                this.modulesSelectedVersion.set(this.selectedModule.id, versionId);
-                this.reRenderCounter++;
-            }
-        };
-        this.renderModuleVersions = () => {
-            return (h("div", { part: "available-versions" }, h("gxg-combo-box", { id: "versions-combo-box", "disable-filter": true, value: this.getModuleData(this.selectedModule, "id"), part: "module-versions", "display-validation-styles": true, "display-validation-message": true, label: this._componentLocale.modulesInformation.moduleProperties
-                    .availableVersions, labelPosition: "start", centerLabel: true, onValueChanged: this.moduleVersionsValueChangedHandler, disabled: this.loadingServer }, this.selectedModule.versions.map(item => (h("gxg-combo-box-item", { value: item.id, onItemSelected: this.moduleVersionsItemChangedHandler }, item.id))))));
-        };
-        this.selectedButtonChangedHandler = (e) => {
-            const type = e.detail.replace("btn-", "");
-            this.filterModulesByType(type);
-        };
-        this.serverItemSelectedHandler = (e) => {
-            const serverId = e.detail.value;
-            this.serverSelectedCallbackHandler(serverId, false);
-        };
-        this.serverValueChangedHandler = (e) => {
-            const serverId = e.detail;
-            this.serverSelectedCallbackHandler(serverId, false);
-        };
-        this.progressBarCloseHandler = () => {
-            setTimeout(() => {
-                this.actionCompleted = true;
-                this.closeProgressBar = true;
-                // reset
-                this.progressValue = 0;
-                this.progressState = "in-progress";
-            }, 400);
-            // delay to force the footer line disappear after the top-state-bar has been closed.
-        };
-        this.reloadServer = () => {
-            this.serverSelectedCallbackHandler(this.selectedServerId, true);
-        };
-        this.modulesAll = [];
+        });
+        this.actionInProgress = false;
+        this.executeActionCallbackInProgress = false;
         this.filteredModules = [];
-        this.selectedModule = undefined;
-        this.selectedServerId = undefined;
+        this.loadingServer = false;
+        this.modulesAll = [];
+        this.progressState = "in-progress";
+        this.progressValue = 0;
+        this.reRenderCounter = 0;
         this.selectedModuleAction = {
             message: "",
             progress: 0,
             state: "in-progress"
         };
-        this.modulesSelectedVersion = new Map();
-        this.actionCompleted = true;
-        this.closeProgressBar = true;
-        this.progressValue = 0;
-        this.progressState = "in-progress";
-        this.loadingServer = false;
-        this.reRenderCounter = 0;
-        this.displayTitle = false;
-        this.servers = [];
-        this.serverSelectedCallback = undefined;
+        this.selectedModuleId = undefined;
+        this.selectedModuleType = "browse";
+        this.selectedServerId = undefined;
+        this.selectedServerValue = undefined;
+        this.serversComboBoxModel = [];
+        this.selectedModuleVersions = [];
+        this.autoCloseProgressBar = false;
         this.executeActionCallback = undefined;
-        this.addServerCallback = undefined;
         this.serverContextMenuCallback = undefined;
+        this.serverSelectedCallback = undefined;
+        this.servers = [];
         this.showServerCommands = false;
     }
-    modulesAllWatcher(modulesAll) {
-        this.updateModulesSelectedVersion(modulesAll);
-    }
-    loadingServerHandler(loading) {
-        if (loading) {
-            this.loaderEl.show = true;
-        }
-        else {
-            this.loaderEl.show = false;
+    modulesAllChanged(newModules) {
+        let currentSelectedVersion;
+        if (this.selectedModuleId) {
+            // If this.selectedModuleId has a value, serverSelectedCallback was called
+            // but the server is the same. This occurs when a user action (e.g., install
+            // or restore) requires modules to update. The selected module and version
+            // remain unchanged. We must save the current version before #clearAll().
+            currentSelectedVersion = __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId).currentSelectedVersion;
         }
+        __classPrivateFieldGet(this, _GxManageModuleReferences_clearAll, "f").call(this);
+        newModules.forEach(module => {
+            let currentSelectedVersionValue = module.versions[0].id;
+            if (currentSelectedVersion && this.selectedModuleId === module.id) {
+                currentSelectedVersionValue = currentSelectedVersion;
+                currentSelectedVersion === undefined; // found. prevent the if in the following iteration.
+            }
+            // fulfill #modulesMap
+            const moduleVersionsComboBoxModel = mapModuleVersionDataToComboBoxModel(module.versions);
+            __classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").set(module.id, {
+                moduleData: module,
+                currentInstalledVersion: module.currentVersion,
+                currentSelectedVersion: currentSelectedVersionValue,
+                comboBoxVersionsModel: moduleVersionsComboBoxModel
+            });
+            // fulfill #moduleVersionsMap.
+            module.versions.forEach(version => {
+                const moduleVersionCombinedId = `${module.id}${MVS}${version.id}`;
+                __classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").set(moduleVersionCombinedId, {
+                    id: version.id,
+                    action: version.action,
+                    description: version.description,
+                    properties: version.properties,
+                    name: version.name,
+                    warningMessage: version.warningMessage
+                });
+            });
+        });
+        __classPrivateFieldSet(this, _GxManageModuleReferences_modulesJustFetched, true, "f");
+        __classPrivateFieldGet(this, _GxManageModuleReferences_filterModules, "f").call(this);
     }
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
+    serversChanged(newServers) {
+        if (newServers.length) {
+            this.serversComboBoxModel =
+                mapModuleServerDataToComboBoxModel(newServers);
+            this.selectedServerValue = this.serversComboBoxModel[0].value;
         }
     }
     async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
+        __classPrivateFieldSet(this, _GxManageModuleReferences_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        this.serversChanged(this.servers); // map ModuleServerData to ComboBoxModel
+        __classPrivateFieldSet(this, _GxManageModuleReferences_segmentedControlModel, [
+            {
+                id: "browse",
+                caption: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modules.buttonsContainer.browse
+            },
+            {
+                id: "installed",
+                caption: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modules.buttonsContainer.installed
+            },
+            {
+                id: "updates",
+                caption: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modules.buttonsContainer.updates
+            }
+        ], "f");
     }
     async componentDidLoad() {
-        await this.serverSelectedCallbackHandler(this.servers[0].id, false);
+        await __classPrivateFieldGet(this, _GxManageModuleReferences_serverSelectedCallbackHandler, "f").call(this, this.servers[0].id, false);
     }
-    // 7.LISTENERS //
-    onPropValueChange(newModulesData) {
-        this.filteredModules = [...newModulesData];
+    componentDidRender() {
+        if (__classPrivateFieldGet(this, _GxManageModuleReferences_modulesJustFetched, "f") && this.selectedModuleId) {
+            // set selected module as selected on the grid after server reload.
+            __classPrivateFieldGet(this, _GxManageModuleReferences_modulesGrid, "f").selectRow(this.selectedModuleId, true);
+            __classPrivateFieldSet(this, _GxManageModuleReferences_modulesJustFetched, false, "f");
+        }
     }
-    // 8.PUBLIC METHODS API //
-    /**
-     * validate
-     */
-    async validate() {
-        return true;
+    progressBarClosedHandler() {
+        // set it to false, to fire a re-render the next time the progress-bar is active.
+        this.actionInProgress = false;
     }
-    // 11.RENDER() FUNCTION //
     render() {
-        return (h(Host, { class: {
-                "gx-ide-component": true
-            } }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noAboveFooterPadding: true, noBorderAboveFooter: this.closeProgressBar, part: "servers", containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("main", { class: "main" }, h("div", { class: "modules__container" }, h("header", { class: "modules__header" }, h("div", { class: "modules__combo-container" }, h("gxg-label", null, this._componentLocale.modules.selectServer), h("div", { class: "modules__combo" }, h("gxg-combo-box", { disableFilter: true, onValueChanged: this.serverValueChangedHandler }, this.servers.map(item => (h("gxg-combo-box-item", { value: item.id, onItemSelected: this.serverItemSelectedHandler }, item.name)))), this.showServerCommands ? (h("span", { class: "modules__server-commands" }, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.showModuleMenu }))) : null, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", onClick: this.reloadServer })))), h("div", { class: "modules__main" }, h("div", { class: "modules__main-header" }, h("gxg-form-text", { label: this._componentLocale.modules.searchModules, labelPosition: "above", centerLabel: false, onValueChanged: this.handleFilterChangeHandler, disabled: this.loadingServer }), h("gxg-buttons-container", { reduced: true, fullWidth: true, class: "modules__browser", onSelectedButtonChanged: this.selectedButtonChangedHandler }, h("gxg-button", { id: "btn-browse", selected: true, disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer.browse), h("gxg-button", { id: "btn-installed", disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer
-            .installed), h("gxg-button", { id: "btn-updates", disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer.updates))), h("div", { class: "grid-container", ref: el => (this.serversDetail = el) }, this.filteredModules.length > 0
-            ? this.renderModulesGrid()
-            : this.renderEmptyStateModules()))), this.selectedModule ? (h("div", { class: "module-info" }, h("header", { class: "module-info__header" }, this.renderVersionName(), this.renderInstalledVersion(), this.renderModuleVersions(), this.renderVersionWarningMessage()), h("div", { class: "module-info__properties gxg-scrollbar" }, renderModuleDataProperties(this.getModuleData(this.selectedModule, "properties"))))) : (h("gx-ide-empty-state", { class: "recent-objects__empty-state", stateIconSrc: __classPrivateFieldGet(this, _GxManageModuleReferences_moduleIcon, "f"), stateTitle: this._componentLocale.modulesInformation.emptyState.title, stateDescription: this._componentLocale.modulesInformation.emptyState
-                .description }))), h("gxg-top-state-bar", { slot: "footer-above", part: "progress-bar", stateType: this.progressState, noBorder: true, caption: this.selectedModuleAction.message ||
-                this._componentLocale.progressBar.defaultCaption, progress: this.progressValue, active: !this.actionCompleted || !this.closeProgressBar, closeType: "not-progress", closedCallback: this.progressBarCloseHandler }))), h("gxg-ide-loader", { loaderTitle: this._componentLocale.servers.loading, ref: el => (this.loaderEl = el), container: this.serversDetail, borderRadius: "0 0 0 8px" })));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "main" }, h("div", { class: "modules__container field-group" }, h("header", { class: "modules__header field-group" }, h("div", { class: "field field-block" }, h("label", { class: "label", htmlFor: "servers-list" }, __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modules.selectServer), h("div", { class: "modules__header-controls buttons-spacer" }, h("ch-combo-box-render", {
+            // select server
+            id: "servers-list", class: "combo-box combo-box-servers", model: this.serversComboBoxModel, value: this.selectedServerValue, disabled: this.loadingServer, onInput: __classPrivateFieldGet(this, _GxManageModuleReferences_serverValueChangedHandler, "f")
+        }), h("div", null, this.showServerCommands && (h("button", {
+            // server context menu button
+            class: "button-tertiary button-icon-only", onClick: __classPrivateFieldGet(this, _GxManageModuleReferences_showModuleMenu, "f"), "aria-label": __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").showServerMenu, title: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").showServerMenu
+        }, h("ch-image", { src: SHOW_MORE_ICON, class: "icon-md" }))), h("button", {
+            // reload server selected button
+            class: "button-tertiary button-icon-only", onClick: __classPrivateFieldGet(this, _GxManageModuleReferences_reloadServer, "f"), "aria-label": __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").reloadModules, title: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").reloadModules
+        }, h("ch-image", { src: RESET_ICON, class: "icon-md" })))))), h("div", {
+            // Modules main
+            class: "modules__main"
+        }, h("div", { class: "modules__main-header" }, h("div", {
+            // search modules
+            class: "field field-block"
+        }, h("label", { class: "label", htmlFor: "search-modules" }, __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modules.searchModules), h("ch-edit", { class: "input", value: __classPrivateFieldGet(this, _GxManageModuleReferences_searchModulesFilterValue, "f"), onInput: __classPrivateFieldGet(this, _GxManageModuleReferences_handleFilterChangeHandler, "f"), disabled: this.loadingServer })), h("div", { class: "browse-modules" }, h("ch-segmented-control-render", { class: "segmented-control-filled", model: __classPrivateFieldGet(this, _GxManageModuleReferences_segmentedControlModel, "f"), selectedId: this.selectedModuleType, onSelectedItemChange: __classPrivateFieldGet(this, _GxManageModuleReferences_moduleTypeButtonClicked, "f") }))), h("div", { class: "grid-or-loader-container" }, this.loadingServer ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").servers.loading, show: true })) : (__classPrivateFieldGet(this, _GxManageModuleReferences_renderModulesGrid, "f").call(this))))), h("div", { class: "module-info field-group" }, this.selectedModuleId ? ([
+            h("header", { class: "module-info__header" }, __classPrivateFieldGet(this, _GxManageModuleReferences_renderVersionName, "f").call(this), __classPrivateFieldGet(this, _GxManageModuleReferences_renderInstalledVersion, "f").call(this), __classPrivateFieldGet(this, _GxManageModuleReferences_renderModuleVersions, "f").call(this), __classPrivateFieldGet(this, _GxManageModuleReferences_renderVersionWarningMessage, "f").call(this)),
+            h("div", { class: "module-info__properties scrollable" }, h("div", { class: "module-info__properties-inner-wrapper" }, renderModuleDataProperties(__classPrivateFieldGet(this, _GxManageModuleReferences_moduleVersionsMap, "f").get(`${this.selectedModuleId}__${__classPrivateFieldGet(this, _GxManageModuleReferences_modulesMap, "f").get(this.selectedModuleId)
+                .currentSelectedVersion}`).properties)))
+        ]) : (h("gx-ide-empty-state", { class: "recent-objects__empty-state", stateIconSrc: MODULE_ICON, stateTitle: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modulesInformation.emptyState.title, stateDescription: __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").modulesInformation.emptyState
+                .description }))), h("footer", { class: "footer" }, h("gx-ide-progress-bar", { class: "border-block-start", slot: "footer-above", part: "progress-bar", stateType: this.progressState, caption: this.selectedModuleAction.message ||
+                __classPrivateFieldGet(this, _GxManageModuleReferences_componentLocale, "f").progressBar.defaultCaption, progress: this.progressValue, active: this.actionInProgress, closeType: this.autoCloseProgressBar ? "auto-close" : "button", closedCallback: __classPrivateFieldGet(this, _GxManageModuleReferences_progressBarCloseHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxManageModuleReferences_progressBarEl, el, "f")) })))));
     }
     static get is() { return "gx-ide-manage-module-references"; }
     static get encapsulation() { return "shadow"; }
@@ -339,11 +395,11 @@ export class GxManageModuleReferences {
     static get assetsDirs() { return ["gx-ide-assets/manage-module-references"]; }
     static get properties() {
         return {
-            "displayTitle": {
+            "autoCloseProgressBar": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "false",
+                    "original": "boolean",
                     "resolved": "boolean",
                     "references": {}
                 },
@@ -351,66 +407,44 @@ export class GxManageModuleReferences {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true it displays the component title on the header"
+                    "text": "If true, the progress bar will close automatically once the progress has reached 100%."
                 },
-                "attribute": "display-title",
+                "attribute": "auto-close-progress-bar",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "servers": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "ModuleServerData[]",
-                    "resolved": "ModuleServerData[]",
-                    "references": {
-                        "ModuleServerData": {
-                            "location": "import",
-                            "path": "../types",
-                            "id": "src/components/modules/types.ts::ModuleServerData"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "List of module servers currently cataloged"
-                },
-                "defaultValue": "[]"
-            },
-            "serverSelectedCallback": {
+            "executeActionCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ServerSelectedCallback",
-                    "resolved": "(id: string, reload: boolean) => Promise<ModuleData[]>",
+                    "original": "ExecuteActionCallback",
+                    "resolved": "(serverId: string, moduleId: string, moduleVersionId: string, action: ModuleActionType, onProgress: (message: string, progress: number, state: TopStateBarType) => void) => Promise<boolean>",
                     "references": {
-                        "ServerSelectedCallback": {
+                        "ExecuteActionCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/modules/manage-module-references/manage-module-references.tsx",
-                            "id": "src/components/modules/manage-module-references/manage-module-references.tsx::ServerSelectedCallback"
+                            "id": "src/components/modules/manage-module-references/manage-module-references.tsx::ExecuteActionCallback"
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when a server is selected. Returns the set of modules available on that server."
+                    "text": "Callback invoked when the user wants to execute the action corresponding to a selected module. When the action begins to be executed, the component must be able to show the progress of the action. For this, the onProgress parameter is available, which is in turn a callback used by the host to notify the progress by text message and percentage."
                 }
             },
-            "executeActionCallback": {
+            "serverContextMenuCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ExecuteActionCallback",
-                    "resolved": "(serverId: string, moduleId: string, moduleVersionId: string, action: ModuleActionType, onProgress: (message: string, progress: number, state: topStateBarType) => void) => Promise<boolean>",
+                    "original": "ServerContextMenuCallback",
+                    "resolved": "(contextMenuInfo: ContextMenuInfo) => Promise<void>",
                     "references": {
-                        "ExecuteActionCallback": {
+                        "ServerContextMenuCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/modules/manage-module-references/manage-module-references.tsx",
-                            "id": "src/components/modules/manage-module-references/manage-module-references.tsx::ExecuteActionCallback"
+                            "id": "src/components/modules/manage-module-references/manage-module-references.tsx::ServerContextMenuCallback"
                         }
                     }
                 },
@@ -418,20 +452,20 @@ export class GxManageModuleReferences {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user wants to execute the action corresponding to a selected module. When the action begins to be executed, the component must be able to show the progress of the action. For this, the onProgress parameter is available, which is in turn a callback used by the host to notify the progress by text message and percentage."
+                    "text": "Callback invoked when an element is right clicked on servers list"
                 }
             },
-            "addServerCallback": {
+            "serverSelectedCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "AddServerCallback",
-                    "resolved": "() => Promise<void>",
+                    "original": "ServerSelectedCallback",
+                    "resolved": "(id: string, reload: boolean) => Promise<ModuleData[]>",
                     "references": {
-                        "AddServerCallback": {
+                        "ServerSelectedCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/modules/manage-module-references/manage-module-references.tsx",
-                            "id": "src/components/modules/manage-module-references/manage-module-references.tsx::AddServerCallback"
+                            "id": "src/components/modules/manage-module-references/manage-module-references.tsx::ServerSelectedCallback"
                         }
                     }
                 },
@@ -439,20 +473,20 @@ export class GxManageModuleReferences {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when Add button is clicked"
+                    "text": "Callback invoked when a server is selected. Returns the set of modules available on that server."
                 }
             },
-            "serverContextMenuCallback": {
+            "servers": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ServerContextMenuCallback",
-                    "resolved": "(contextMenuInfo: ContextMenuInfo) => Promise<void>",
+                    "original": "ModuleServerData[]",
+                    "resolved": "ModuleServerData[]",
                     "references": {
-                        "ServerContextMenuCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/modules/manage-module-references/manage-module-references.tsx",
-                            "id": "src/components/modules/manage-module-references/manage-module-references.tsx::ServerContextMenuCallback"
+                        "ModuleServerData": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/modules/types.ts::ModuleServerData"
                         }
                     }
                 },
@@ -460,8 +494,9 @@ export class GxManageModuleReferences {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when an element is right clicked on servers list"
-                }
+                    "text": "List of module servers currently cataloged"
+                },
+                "defaultValue": "[]"
             },
             "showServerCommands": {
                 "type": "boolean",
@@ -475,7 +510,7 @@ export class GxManageModuleReferences {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Allows you to hide the button (...) that executes serverContextMenuCallback, if we do not implement the commands in a first version"
+                    "text": "Allows you to hide the button (...) that executes serverContextMenuCallback"
                 },
                 "attribute": "show-server-commands",
                 "reflect": false,
@@ -485,72 +520,42 @@ export class GxManageModuleReferences {
     }
     static get states() {
         return {
-            "modulesAll": {},
+            "actionInProgress": {},
+            "executeActionCallbackInProgress": {},
             "filteredModules": {},
-            "selectedModule": {},
-            "selectedServerId": {},
-            "selectedModuleAction": {},
-            "modulesSelectedVersion": {},
-            "actionCompleted": {},
-            "closeProgressBar": {},
-            "progressValue": {},
-            "progressState": {},
             "loadingServer": {},
-            "reRenderCounter": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "componentDidRenderFirstTime",
-                "name": "componentDidRenderFirstTime",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "This event is emitted once just after the component is fully loaded and the first render() occurs"
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "validate": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "validate",
-                    "tags": []
-                }
-            }
+            "modulesAll": {},
+            "progressState": {},
+            "progressValue": {},
+            "reRenderCounter": {},
+            "selectedModuleAction": {},
+            "selectedModuleId": {},
+            "selectedModuleType": {},
+            "selectedServerId": {},
+            "selectedServerValue": {},
+            "serversComboBoxModel": {},
+            "selectedModuleVersions": {}
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "modulesAll",
-                "methodName": "modulesAllWatcher"
+                "methodName": "modulesAllChanged"
             }, {
-                "propName": "loadingServer",
-                "methodName": "loadingServerHandler"
-            }, {
-                "propName": "modulesAll",
-                "methodName": "onPropValueChange"
+                "propName": "servers",
+                "methodName": "serversChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "progressBarClosed",
+                "method": "progressBarClosedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }
-_GxManageModuleReferences_filterIcon = new WeakMap(), _GxManageModuleReferences_moduleIcon = new WeakMap();
+_GxManageModuleReferences_componentLocale = new WeakMap(), _GxManageModuleReferences_moduleVersionsMap = new WeakMap(), _GxManageModuleReferences_modulesMap = new WeakMap(), _GxManageModuleReferences_modulesJustFetched = new WeakMap(), _GxManageModuleReferences_searchModulesFilterValue = new WeakMap(), _GxManageModuleReferences_modulesGrid = new WeakMap(), _GxManageModuleReferences_progressBarEl = new WeakMap(), _GxManageModuleReferences_segmentedControlModel = new WeakMap(), _GxManageModuleReferences_clearAll = new WeakMap(), _GxManageModuleReferences_filterModules = new WeakMap(), _GxManageModuleReferences_getActionFromCurrentModuleVersion = new WeakMap(), _GxManageModuleReferences_handleFilterChangeHandler = new WeakMap(), _GxManageModuleReferences_handleModuleChange = new WeakMap(), _GxManageModuleReferences_moduleActionHandler = new WeakMap(), _GxManageModuleReferences_moduleTypeButtonClicked = new WeakMap(), _GxManageModuleReferences_moduleVersionsValueChangedHandler = new WeakMap(), _GxManageModuleReferences_onProgress = new WeakMap(), _GxManageModuleReferences_progressBarCloseHandler = new WeakMap(), _GxManageModuleReferences_reloadServer = new WeakMap(), _GxManageModuleReferences_renderEmptyStateModules = new WeakMap(), _GxManageModuleReferences_renderInstalledVersion = new WeakMap(), _GxManageModuleReferences_renderModuleVersions = new WeakMap(), _GxManageModuleReferences_renderModulesGrid = new WeakMap(), _GxManageModuleReferences_renderVersionName = new WeakMap(), _GxManageModuleReferences_renderVersionWarningMessage = new WeakMap(), _GxManageModuleReferences_serverSelectedCallbackHandler = new WeakMap(), _GxManageModuleReferences_serverValueChangedHandler = new WeakMap(), _GxManageModuleReferences_showModuleMenu = new WeakMap();
 //# sourceMappingURL=manage-module-references.js.map