@genexus/genexus-ide-ui 1.1.61 → 1.1.63

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

@@ -1,13 +1,53 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b153bfd0.js';
+import { h, r as registerInstance, H as Host, a as getElement } from './index-b153bfd0.js';
 import { g as getIconPath } from './assets-manager-7d6fc08f.js';
 import './mer-animated-dots-75d88f7e.js';
 import 'lit';
 import 'lit/directives/when.js';
 import 'lit/directives/if-defined.js';
-import { r as renderModuleDataProperties } from './common-b811a822.js';
+import { c as config } from './config-5a775b7a.js';
 import { L as Locale } from './locale-e5107fad.js';
+import { h as hiChar } from './helpers-7800bea2.js';
 
-const manageModuleReferencesCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.pill-tag{padding:1px 4px;border-radius:2px;min-inline-size:40px;text-align:center;margin-inline-end:10px;font-size:11px}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}.giu-static-pill-icon-and-text,.giu-static-pill{background-color:var(--elevation-background-color, var(--mer-surface__elevation--01));padding-inline:var(--mer-spacing--xs);color:var(--mer-text__on-elevation);font-size:var(--font-size-body-s);line-height:1.4;font-weight:var(--font-weight-regular);border-radius:var(--mer-border__width--lg);min-block-size:25px;display:inline-grid;align-items:center;pointer-events:none}.giu-static-pill-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--mer-spacing--xs)}.tab-full-width-buttons::part(tab-list block-start),.tab-full-width-buttons::part(tab-list block-end){grid-auto-columns:1fr}.tab-full-width-buttons::part(tab block-start){justify-content:center}p,ul{font-size:var(--font-size-lg);margin:0}p{line-height:1.6em}.header{align-items:center;grid-template-columns:1fr auto;grid-template-rows:1fr}.main{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;height:100%;overflow:auto}ch-grid-columnset{display:none}ch-grid-row[selected] gxg-icon[data-action=install]{filter:brightness(2)}.grid-cell-module__info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mer-spacing--3xs)}.grid-cell-module__name{font-weight:var(--mer-font__weight--bold)}.grid-cell-module__name,.grid-cell-module__description{line-height:1.55em}.grid-container{height:100%;overflow:auto}.grid-container gx-ide-empty-state{height:100%}.servers-container{display:none;height:100%}.servers-container__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gxg-list-box-main__padding) var(--gxg-list-box-main__padding) 0 var(--gxg-list-box-main__padding)}.servers-container__header gxg-button{width:100%}.modules__header{padding:var(--gxg-list-box-main__padding);display:flex;flex-direction:column;gap:var(--mer-spacing--xs)}.modules__combo-container{display:flex;flex-direction:column;gap:var(--mer-spacing--xs)}.modules__server-commands{display:flex;gap:var(--mer-spacing--xs)}.modules__combo{display:flex;flex-direction:row;gap:var(--mer-spacing--xs)}.modules__combo gxg-combo-box{flex:1}.modules__container{border-inline-end:var(--mer-border__width--sm) solid var(--gx-ide-container-border-color);display:grid;grid-template-rows:auto 1fr;height:100%;overflow:auto}.modules__main{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:auto}.modules__main-header{display:flex;padding:var(--mer-spacing--xs);flex-direction:column;gap:var(--mer-spacing--xs)}.module-info{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:auto}.module-info__title{display:flex;align-items:center;gap:var(--mer-spacing--xs)}.module-info__name{display:flex;align-items:center;gap:var(--mer-spacing--sm);--ds-icon-size-box--regular:24px;--ds-icon-size--regular:24px;font-weight:var(--mer-font__weight--bold)}.module-info__header{padding:var(--gx-ide-container__padding);display:flex;flex-direction:column;gap:var(--mer-spacing--xs);border-block-end:var(--mer-border__width--sm) solid var(--gx-ide-container-border-color)}.module-info__action-container{display:flex;flex-direction:row;align-items:center;gap:var(--mer-spacing--xs)}.module-info__action-container:before{content:\"\";width:var(--mer-spacing--xs);height:var(--mer-spacing--xs);border-radius:50%;display:block;background-color:var(--mer-icon__primary--disabled)}.module-info__action-container--installed:before{background-color:var(--mer-icon__primary)}.module-info__action-container--uninstallable:before{background-color:var(--mer-icon__warning)}.module-info__warning-message{margin-block-start:var(--mer-spacing--2xs);background-color:var(--mer-color__tinted-yellow--5);color:var(--mer-text__on-elevation);border:var(--mer-border__width--sm) solid var(--mer-border-color__warning);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--xs) var(--mer-spacing--md)}.module-info__divider{width:calc(100% - var(--gx-ide-container__padding) * 4);padding:0 var(--gx-ide-container__padding);margin:0 auto;border:0;border-block-end:var(--mer-border__width--sm) solid var(--gx-ide-container-border-color)}.module-info__properties{display:flex;flex-direction:column;padding:var(--gx-ide-container__padding);gap:var(--mer-spacing--xs);overflow:auto}.md-property{display:grid;gap:var(--mer-spacing--xs)}.md-property--inline{grid-template-columns:auto 1fr}.md-property__key{font-weight:var(--font-weight-bold);max-width:150px}.md-property__value{font-size:var(--mer-font__size--2xs)}.md-property__key>*,.md-property__value>*{display:inline-block}.md-property__list{display:flex;flex-direction:column;gap:var(--mer-spacing--xs)}.md-property__list>ul{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;gap:var(--mer-spacing--2xs);margin-inline-start:var(--mer-spacing--xs)}.md-property__list>ul li{position:relative;padding-inline-start:12px;line-height:var(--ds-base-font-line-height--comfortable)}.md-property__list>ul li::before{content:\"\";position:absolute;left:0;top:7px;display:inline-block;width:var(--mer-spacing--2xs);height:var(--mer-spacing--2xs);background-color:var(--mer-text__on-surface)}.md-property,.md-property__list{border-block-end:var(--mer-border__width--sm) solid var(--gx-ide-container-border-color);padding-block-end:var(--mer-spacing--xs)}.md-property:last-child,.md-property__list:last-child{border-block-end:0;padding-block-end:0}gxg-ide-loader{border-radius:var(--mer-border__radius--md)}.button-wrapper{display:grid;align-items:center;justify-content:center}";
+const mapModuleServerDataToComboBoxModel = (servers) => servers.map(server => ({
+    value: server.id,
+    caption: server.name
+}));
+const mapModuleVersionDataToComboBoxModel = (moduleVersions) => moduleVersions.map(moduleVersion => ({
+    value: moduleVersion.id,
+    caption: moduleVersion.name
+}));
+const renderModuleDataProperties = (options) => {
+    if (options.length) {
+        const items = [];
+        options.forEach(option => {
+            const isArray = Array.isArray(option.value);
+            if (isArray && option.value.length) {
+                const item = (h("div", { class: "md-property__list-container" },
+                    h("p", { class: "md-property__key subtitle-semi-bold-xs" },
+                        option.name,
+                        " :"),
+                    h("ul", { class: "md-property__list" }, option.value.map(subItem => {
+                        return (h("li", { class: "md-property__list-item body-regular-s" }, subItem));
+                    }))));
+                items.push(item);
+            }
+            else if (!isArray) {
+                const item = (h("div", { class: option.inline
+                        ? "md-property md-property--inline"
+                        : "md-property md-property--block" },
+                    h("p", { class: "md-property__key subtitle-semi-bold-xs" },
+                        option.name,
+                        " :"),
+                    h("p", { class: "md-property__value body-regular-s" }, option.value)));
+                items.push(item);
+            }
+        });
+        return items;
+    }
+    return null;
+};
+
+const manageModuleReferencesCss = ".hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}:host{display:grid;block-size:100%;overflow:auto;grid-template-areas:\"modules-container module-info\" \"footer footer\";grid-template-columns:1fr 1fr;grid-template-rows:1fr max-content}.main{display:contents}.modules__container{padding-inline-end:var(--mer-spacing--sm);grid-area:modules-container;grid-template-rows:max-content 1fr;overflow:auto}.combo-box-servers{flex-shrink:0;flex-grow:1}.modules__main{display:grid;grid-template-rows:max-content 1fr;overflow:auto}.modules__main-header{display:grid;gap:var(--mer-spacing--xs)}.browse-modules button{flex-grow:1}.module-icon{margin-block-start:var(--mer-spacing--xs);transform:scale(1) translateX(var(--mer-spacing--2xs))}.module-grid-item-info{grid-template-columns:max-content 1fr}.grid-or-loader-container{display:grid;position:relative;overflow:hidden;margin-block-start:var(--mer-spacing--sm)}.tabular-grid{overflow:hidden}.tabular-grid-column-set{display:none}.tabular-grid-cell-icon{pointer-events:none}gx-ide-empty-state{position:absolute}.module-info{padding-inline-start:var(--mer-spacing--sm);grid-area:module-info;position:relative}.modules-container,.module-info{overflow:auto}.module-info{display:grid;grid-template-rows:max-content 1fr;overflow:auto}.module-info__action-container{display:flex;flex-direction:row;align-items:center;gap:var(--mer-spacing--xs)}.module-info__action-container:before{content:\"\";inline-size:var(--mer-spacing--xs);block-size:var(--mer-spacing--xs);border-radius:50%;display:block;background-color:var(--mer-icon__primary--disabled)}.module-info__action-container--installed{color:var(--mer-text__success)}.module-info__action-container--installed:before{background-color:var(--mer-text__success)}.module-info__action-container--uninstallable:before{background-color:var(--mer-icon__warning)}.module-info__header{display:grid;gap:var(--mer-spacing--xs)}.module-info__title{display:grid;grid-template-columns:max-content 1fr;align-items:center;gap:var(--mer-spacing--md)}.module-info__icon{transform:scale(1) translateX(var(--mer-spacing--2xs))}.module-info__alert-message{padding:var(--mer-spacing--xs) var(--mer-spacing--sm);border-radius:var(--mer-border__radius--sm);background-color:var(--mer-color__tinted-yellow--5);color:var(--mer-text__bright);border:var(--mer-border__width--sm) solid var(--mer-border-color__warning);text-align:center;line-height:var(--mer-line-height--spaced)}.module-info__properties{display:grid;overflow:auto;grid-auto-rows:max-content}.md-property,.md-property__list-container{padding-block:var(--mer-spacing--xs);display:grid;gap:var(--mer-spacing--2xs);border-block-end:var(--mer-border__width--sm) solid var(--elevation-border-color, var(--mer-border-color__on-surface))}.md-property:last-child,.md-property__list-container:last-child{border-block-end:0}.md-property__list{margin:0;list-style-type:none;display:inline-flex;padding:0;gap:var(--mer-spacing--2xs);flex-wrap:wrap}.md-property__list-item{background-color:var(--mer-surface__elevation--02);padding:var(--mer-spacing--3xs) var(--mer-spacing--xs);border-radius:var(--mer-border__radius--sm);text-transform:lowercase}.md-property--inline{grid-template-columns:max-content 1fr;align-items:start;gap:var(--mer-spacing--xs)}.available-versions .versions{flex:1}.available-versions .button-status{min-inline-size:var(--mer-spacing--3xl);inline-size:max-content;box-sizing:border-box}.footer{grid-area:footer}p.body-regular-s,li.body-regular-s{line-height:var(--mer-line-height--regular)}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -16,138 +56,237 @@ var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) ||
         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;
+var __classPrivateFieldSet = (undefined && undefined.__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;
 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
 const GxManageModuleReferences = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
-        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({
@@ -156,190 +295,143 @@ const GxManageModuleReferences = class {
                     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;
+            }
+            // 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 assetsDirs() { return ["gx-ide-assets/manage-module-references"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "modulesAll": ["modulesAllWatcher", "onPropValueChange"],
-        "loadingServer": ["loadingServerHandler"]
+        "modulesAll": ["modulesAllChanged"],
+        "servers": ["serversChanged"]
     }; }
 };
-_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();
 GxManageModuleReferences.style = manageModuleReferencesCss;
 
 export { GxManageModuleReferences as gx_ide_manage_module_references };