@genexus/genexus-ide-ui 0.0.109 → 0.0.111

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

@@ -12,25 +12,25 @@ import { d as defineCustomElement$m } from './icon.js';
 import { d as defineCustomElement$l } from './ch-window2.js';
 import { d as defineCustomElement$k } from './ch-window-close2.js';
 import { d as defineCustomElement$j } from './container.js';
-import { d as defineCustomElement$i } from './list-selector.js';
-import { d as defineCustomElement$h } from './list-selector-item.js';
-import { d as defineCustomElement$g } from './title.js';
-import { d as defineCustomElement$f } from './button.js';
-import { d as defineCustomElement$e } from './buttons-container.js';
-import { d as defineCustomElement$d } from './combo-box.js';
-import { d as defineCustomElement$c } from './combo-box-item.js';
-import { d as defineCustomElement$b } from './form-checkbox.js';
-import { d as defineCustomElement$a } from './form-radio.js';
-import { d as defineCustomElement$9 } from './form-text.js';
-import { d as defineCustomElement$8 } from './gxg-grid2.js';
-import { d as defineCustomElement$7 } from './icon2.js';
+import { d as defineCustomElement$i } from './gx-ide-empty-state2.js';
+import { d as defineCustomElement$h } from './title2.js';
+import { d as defineCustomElement$g } from './button.js';
+import { d as defineCustomElement$f } from './buttons-container.js';
+import { d as defineCustomElement$e } from './combo-box.js';
+import { d as defineCustomElement$d } from './combo-box-item.js';
+import { d as defineCustomElement$c } from './form-checkbox.js';
+import { d as defineCustomElement$b } from './form-radio.js';
+import { d as defineCustomElement$a } from './form-text.js';
+import { d as defineCustomElement$9 } from './gxg-grid2.js';
+import { d as defineCustomElement$8 } from './icon2.js';
+import { d as defineCustomElement$7 } from './ide-loader.js';
 import { d as defineCustomElement$6 } from './gxg-label2.js';
 import { d as defineCustomElement$5 } from './text.js';
-import { d as defineCustomElement$4 } from './title2.js';
+import { d as defineCustomElement$4 } from './title.js';
 import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './gxg-top-state-bar2.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)}.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-container{display:flex;height:100%;width:100%;box-sizing:border-box}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:1.5fr 2fr;grid-template-rows:1fr;height:100%;overflow:auto}ch-grid-columnset{display:none}.grid-cell-module__info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mer-spacing--xxs)}.grid-cell-module__name{font-weight:var(--mer-font__weight--bold)}.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__combo-container{display:flex;flex-direction:column;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__menu-container{position:relative}.modules__menu{display:none;width:200px;position:fixed;z-index:10;right:0;transform:translateX(-100%)}.modules__menu--visible{display:block}.modules__header{padding:var(--gxg-list-box-main__padding);display:flex;flex-direction:column;gap:var(--mer-spacing--xs)}.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}.module-info{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:auto}.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__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--xxs)}.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--xxs);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--xxs);height:var(--mer-spacing--xxs);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}";
+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)}.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-container{display:flex;height:100%;width:100%;box-sizing:border-box}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}.grid-cell-module__info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mer-spacing--xxxs)}.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__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__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__alert-message{margin-block-start:var(--mer-spacing--xxs);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--xxs)}.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--xxs);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--xxs);height:var(--mer-spacing--xxs);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)}";
 
 const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManageModuleReferences extends HTMLElement {
     constructor() {
@@ -40,9 +40,28 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
         this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
         this.renderedFirstTime = false;
         // 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[module.versions.length - 1].id);
+                });
+            }
+            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);
+                    }
+                });
+            }
+            this.selectedServerIdOnModulesAllUpdate = this.selectedServerId;
+        };
         this.getActionFromCurrentModuleVersion = () => {
-            const selected = this.selectedModule.versions.find(({ id }) => id === this.selectedModule.currentVersion);
-            return selected.action;
+            const action = this.getModuleData(this.selectedModule, "action");
+            return action || "install";
         };
         /**
          * Callback invoked to get the progress when module is performing an action
@@ -57,25 +76,35 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
         /**
          * Used for changing the selected module
          */
-        this.handleModuleChange = (row) => {
-            const foundModule = this.modulesAll.find(item => item.id === row.rowsId[0]);
-            this.selectedModule = foundModule;
+        this.handleModuleChange = (event) => {
+            const selectedModuleId = event.detail.rowsId[0];
+            const foundModule = this.modulesAll.find(item => item.id === selectedModuleId);
+            if (foundModule) {
+                this.selectedModule = foundModule;
+            }
         };
         /**
          * Change the server selected value in response to callbackServerSelected callback
          */
         this.serverSelectedCallbackHandler = async (id) => {
-            const resolvedObjects = await this.serverSelectedCallback(id);
-            this.selectedServerId = id;
-            this.modulesAll = [...resolvedObjects];
-            this.filterModulesByType("browse");
-            this.selectedModule = this.filteredModules[0];
+            if (this.serverSelectedCallback) {
+                this.loadingServer = true;
+                const resolvedObjects = await this.serverSelectedCallback(id);
+                this.selectedServerId = id;
+                this.modulesAll = [...resolvedObjects];
+                this.filterModulesByType("browse");
+                this.selectedModule = this.filteredModules[0];
+                this.loadingServer = false;
+            }
         };
         this.handleFilterChange = (value) => {
             const trimmedValue = value.trim();
             if (trimmedValue) {
                 const lowerCaseValue = trimmedValue.toLowerCase();
-                this.filteredModules = this.modulesAll.filter(module => module.name.toLowerCase().includes(lowerCaseValue));
+                this.filteredModules = this.modulesAll.filter(module => {
+                    const selectedVersionName = this.getModuleData(module, "name");
+                    return selectedVersionName === null || selectedVersionName === void 0 ? void 0 : selectedVersionName.toLowerCase().includes(lowerCaseValue);
+                });
             }
             else {
                 this.filteredModules = this.modulesAll;
@@ -85,8 +114,12 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
          * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback
          */
         this.executeActionCallbackHandler = async (module) => {
-            const actionCompleted = await this.executeActionCallback(this.selectedServerId, module.id, this.getActionFromCurrentModuleVersion(), this.onProgress);
-            this.actionCompleted = actionCompleted;
+            if (this.executeActionCallback) {
+                console.log("hey!");
+                const moduleSelectedVersionId = this.modulesSelectedVersion.get(module.id);
+                const actionCompleted = await this.executeActionCallback(this.selectedServerId, module.id, moduleSelectedVersionId, this.getActionFromCurrentModuleVersion(), this.onProgress);
+                this.actionCompleted = actionCompleted;
+            }
         };
         this.filterModulesByType = (type) => {
             // browse
@@ -96,42 +129,16 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
             // installed
             else if (type === "installed") {
                 this.filteredModules = this.modulesAll.filter((module) => {
-                    const versionData = module.versions.find(version => {
-                        return version.id === module.currentVersion;
-                    });
-                    return (versionData &&
-                        (versionData.action === "restore" || versionData.action === "update"));
+                    // 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) => {
-                    const versionData = module.versions.find(version => {
-                        return version.id === module.currentVersion;
-                    });
-                    return versionData && versionData.action === "update";
+                    return module.versions.find(version => version.action === "update");
                 });
             }
         };
-        this.moduleMenuSelectionChangedHandler = async (e) => {
-            const itemId = e.detail[0].itemId;
-            if (itemId === "add") {
-                if (this.addServerCallback) {
-                    await this.addServerCallback();
-                }
-            }
-            else if (itemId === "edit") {
-                console.log(this.modulesList.value);
-            }
-            else if (itemId === "upload") {
-                console.log("upload");
-            }
-        };
-        this.renderMenu = () => {
-            return (h("gx-ide-list-selector", { onSelectionChanged: this.moduleMenuSelectionChangedHandler, class: "modules__menu", type: "single-selection", listName: "module-menu", ellipsis: true, style: {
-                    left: this.moduleMenuLeftPosition,
-                    top: this.moduleMenuTopPosition
-                } }, h("gx-ide-list-selector-item", { itemId: "add", itemValue: "Add", icon: "gemini-tools/add" }), h("gx-ide-list-selector-item", { itemId: "edit", itemValue: "Edit", icon: "gemini-tools/edit" }), h("gx-ide-list-selector-item", { itemId: "upload", itemValue: "Upload from file", icon: "gemini-tools/file" })));
-        };
         this.showModuleMenu = async (e) => {
             if (this.serverContextMenuCallback) {
                 const buttonBoundingClientRect = e.target.getBoundingClientRect();
@@ -142,35 +149,87 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
                 });
             }
         };
+        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.renderModulesGrid = () => {
-            return (h("gxg-grid", { noBorder: true, fullHeight: true }, h("ch-grid", { rowSelectionMode: "single", part: "ch-grid-pending-commits", class: "no-border",
-                /* TODO: El error es aqui ya que se esta enviando el valor del row Id correspondiente a la primera carga del grid con el primer server */
-                onSelectionChanged: (row) => this.handleModuleChange(row.detail) }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, size: "min-content" }), h("ch-grid-column", { settingable: false }), h("ch-grid-column", { settingable: false, size: "min-content" })), this.filteredModules.map((item) => (h("ch-grid-row", { rowid: item.id, key: item.id, selected: this.selectedModule && this.selectedModule.id === item.id }, h("ch-grid-cell", null, h("gxg-icon", { type: "objects/module", color: "auto", size: "small" })), h("ch-grid-cell", { class: "grid-cell-module__info" }, h("span", { class: "grid-cell-module__name" }, item.name), h("span", { class: "grid-cell-module__description" }, item.description)), h("ch-grid-cell", null, this.selectedModule && this.selectedModule.id === item.id ? (h("gxg-button", { disabled: !this.actionCompleted, fit: true, part: "module-action", onClick: () => {
+            return (h("gxg-grid", { noBorder: true, fullHeight: true }, h("ch-grid", { rowSelectionMode: "single", part: "ch-grid-pending-commits", class: "servers-detail no-border", onSelectionChanged: this.handleModuleChange }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, size: "min-content" }), h("ch-grid-column", { settingable: false }), h("ch-grid-column", { settingable: false, size: "min-content" })), this.filteredModules.map((module) => (h("ch-grid-row", { rowid: module.id, key: module.id, selected: this.selectedModule && this.selectedModule.id === module.id }, h("ch-grid-cell", null, h("gxg-icon", { type: "objects/module", color: this.moduleVersionIconColor(module), size: "small" })), h("ch-grid-cell", { class: "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-grid-cell", null, this.selectedModule && this.selectedModule.id === module.id ? (h("gxg-button", { disabled: !this.actionCompleted ||
+                    this.getModuleData(module, "action") === "incompatible" ||
+                    this.getModuleData(module, "action") === "not-installable", fit: true, part: "module-action", onClick: () => {
                     this.actionCompleted = false;
                     this.closeProgressBar = false;
-                    this.executeActionCallbackHandler(item);
+                    this.executeActionCallbackHandler(module);
                 } }, this.getActionFromCurrentModuleVersion())) : null)))))));
         };
-        this.moduleIconColor = () => {
-            return this.getActionFromCurrentModuleVersion() === "install"
-                ? "mercury-primary-disabled"
-                : "mercury-primary";
+        this.renderEmptyStateModules = () => {
+            return (h("gx-ide-empty-state", { stateIcon: "mercury/filters", stateTitle: this._componentLocale.modules.noModulesFilter }));
+        };
+        this.moduleVersionIconColor = (module) => {
+            const moduleAction = this.getModuleData(module, "action");
+            if (moduleAction === "not-installable" || moduleAction === "incompatible") {
+                return "warning";
+            }
+            else if (moduleAction === "install") {
+                return "mercury-primary-disabled";
+            }
+            else {
+                return "mercury-primary";
+            }
         };
         /* module details/information renders*/
         this.renderModuleName = () => {
-            return (h("gxg-title", { part: "module-info__name", type: "title-05" }, h("div", { class: "module-info__name" }, h("gxg-icon", { type: "objects/module", color: this.moduleIconColor() }), this.selectedModule.name)));
+            return (h("gxg-title", { part: "module-info__name", type: "title-05" }, h("div", { class: "module-info__name" }, h("gxg-icon", { type: "objects/module", color: this.moduleVersionIconColor(this.selectedModule) }), this.getModuleData(this.selectedModule, "name"))));
+        };
+        this.renderModuleAlertMessage = () => {
+            const alertMessage = this.getModuleData(this.selectedModule, "alertMessage");
+            if (alertMessage) {
+                return h("p", { class: "module-info__alert-message" }, alertMessage);
+            }
         };
         this.renderModuleAction = () => {
-            return this.getActionFromCurrentModuleVersion() === "install" ? (h("div", { class: "module-info__action-container" }, h("gxg-text", { part: "not-installed" }, this._componentLocale.modulesInformation.moduleProperties
-                .notInstalled))) : (h("div", { class: "module-info__action-container module-info__action-container--installed" }, h("gxg-text", { part: "installed" }, ` ${this._componentLocale.modulesInformation.moduleProperties.installedVersion} : ${this.selectedModule.currentVersion}`)));
+            const action = this.getActionFromCurrentModuleVersion();
+            let actionDescription;
+            let cssClass = "module-info__action-container";
+            if (action === "restore" || action === "update") {
+                actionDescription =
+                    this._componentLocale.modulesInformation.moduleProperties.installed;
+                cssClass += ` module-info__action-container--installed`;
+            }
+            else if (action === "incompatible" || action === "not-installable") {
+                actionDescription = "Can not be installed";
+            }
+            else {
+                actionDescription =
+                    this._componentLocale.modulesInformation.moduleProperties.notInstalled;
+            }
+            return (h("div", { class: cssClass }, h("gxg-text", { part: "module-info__action" }, actionDescription)));
         };
         this.moduleVersionsValueChangedHandler = (e) => {
-            const moduleId = e.detail;
-            this.selectedModule = Object.assign(Object.assign({}, this.selectedModule), { currentVersion: moduleId });
+            const versionId = e.detail;
+            this.updateSelectedModuleVersion(versionId);
+        };
+        this.moduleVersionsItemChangedHandler = (e) => {
+            const versionId = e.detail.value;
+            this.updateSelectedModuleVersion(versionId);
+        };
+        this.updateSelectedModuleVersion = (versionId) => {
+            if (versionId) {
+                this.selectedModule = Object.assign(Object.assign({}, this.selectedModule), { currentVersion: versionId });
+                this.modulesSelectedVersion.set(this.selectedModule.id, versionId);
+            }
         };
         this.renderModuleVersions = () => {
-            return (h("div", { part: "available-versions" }, h("gxg-combo-box", { id: "versions-combo-box", "disable-filter": true, value: this.selectedModule.versions[0]["id"], part: "module-versions", "display-validation-styles": true, "display-validation-message": true, label: this._componentLocale.modulesInformation.moduleProperties
-                    .availableVersions, labelPosition: "start", centerLabel: true, ref: el => (this.modulesList = el), onValueChanged: this.moduleVersionsValueChangedHandler }, this.selectedModule.versions.map(item => (h("gxg-combo-box-item", { value: item.id, onItemSelected: () => (this.selectedModule = Object.assign(Object.assign({}, this.selectedModule), { currentVersion: item.id })) }, item.id))))));
+            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-", "");
@@ -203,18 +262,31 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
             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.displayTitle = false;
         this.servers = [];
         this.serverSelectedCallback = undefined;
         this.executeActionCallback = undefined;
         this.addServerCallback = undefined;
         this.serverContextMenuCallback = undefined;
     }
+    modulesAllWatcher(modulesAll) {
+        this.updateModulesSelectedVersion(modulesAll);
+    }
+    loadingServerHandler(loading) {
+        if (loading) {
+            this.loaderEl.show = true;
+        }
+        else {
+            this.loaderEl.show = false;
+        }
+    }
     // 6.COMPONENT LIFECYCLE EVENTS //
-    async componentDidLoad() { }
     componentDidRender() {
         if (!this.renderedFirstTime) {
             this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
@@ -223,6 +295,8 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
     }
     async componentWillLoad() {
         this._componentLocale = await Locale.getComponentStrings(this.el);
+    }
+    async componentDidLoad() {
         await this.serverSelectedCallbackHandler(this.servers[0].id);
     }
     // 7.LISTENERS //
@@ -240,18 +314,24 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
     render() {
         return (h(Host, { class: {
                 "gx-ide-component": true
-            } }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noAboveFooterPadding: true, noBorderAboveFooter: this.closeProgressBar, noContentPadding: true, part: "servers", containerTitle: this._componentLocale.componentName }, 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)))), h("span", { class: "modules__menu-container" }, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.showModuleMenu }), this.renderMenu()))), h("gxg-form-text", { label: this._componentLocale.modules.searchModules, labelPosition: "above", centerLabel: false, onValueChanged: (event) => {
+            } }, 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)))), h("span", { class: "modules__menu-container" }, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.showModuleMenu }))))), 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: (event) => {
                 this.handleFilterChange(event.detail);
-            } }), h("gxg-buttons-container", { reduced: true, fullWidth: true, class: "modules__browser", onSelectedButtonChanged: this.selectedButtonChangedHandler }, h("gxg-button", { id: "btn-browse", selected: true }, this._componentLocale.modules.tabs.browse), h("gxg-button", { id: "btn-installed" }, this._componentLocale.modules.tabs.installed), h("gxg-button", { id: "btn-updates" }, this._componentLocale.modules.tabs.updates))), this.renderModulesGrid()), this.selectedModule ? (h("div", { class: "module-info" }, h("header", { class: "module-info__header" }, this.renderModuleName(), this.renderModuleAction(), this.renderModuleVersions()), h("div", { class: "module-info__properties gxg-scrollbar" }, renderModuleDataProperties(this.selectedModule.properties)))) : null), h("gxg-top-state-bar", { slot: "footer-above", part: "progress-bar", stateType: this.progressState, noBorder: true, caption: this.selectedModuleAction.message ||
-                this._componentLocale.progressDefaultCaption, progress: this.progressValue, active: !this.actionCompleted || !this.closeProgressBar, autoClose: false, withClose: true, closedCallback: this.progressBarCloseHandler })))));
+            }, 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.renderModuleName(), this.renderModuleAlertMessage(), this.renderModuleAction(), this.renderModuleVersions()), h("div", { class: "module-info__properties gxg-scrollbar" }, renderModuleDataProperties(this.getModuleData(this.selectedModule, "properties"))))) : (h("gx-ide-empty-state", { class: "recent-objects__empty-state", stateIcon: "objects/module", 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, autoClose: false, withClose: true, 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" })));
     }
     static get assetsDirs() { return ["gx-ide-assets/manage-module-references"]; }
     get el() { return this; }
     static get watchers() { return {
-        "modulesAll": ["onPropValueChange"]
+        "modulesAll": ["modulesAllWatcher", "onPropValueChange"],
+        "loadingServer": ["loadingServerHandler"]
     }; }
     static get style() { return manageModuleReferencesCss; }
 }, [1, "gx-ide-manage-module-references", {
+        "displayTitle": [4, "display-title"],
         "servers": [16],
         "serverSelectedCallback": [16],
         "executeActionCallback": [16],
@@ -262,19 +342,22 @@ const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManage
         "selectedModule": [32],
         "selectedServerId": [32],
         "selectedModuleAction": [32],
+        "modulesSelectedVersion": [32],
         "actionCompleted": [32],
         "closeProgressBar": [32],
         "progressValue": [32],
         "progressState": [32],
+        "loadingServer": [32],
         "validate": [64]
     }, undefined, {
-        "modulesAll": ["onPropValueChange"]
+        "modulesAll": ["modulesAllWatcher", "onPropValueChange"],
+        "loadingServer": ["loadingServerHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-manage-module-references", "ch-grid", "ch-grid-column", "ch-grid-column-resize", "ch-grid-column-settings", "ch-grid-columnset", "ch-grid-settings", "ch-grid-settings-columns", "ch-icon", "ch-window", "ch-window-close", "gx-ide-container", "gx-ide-list-selector", "gx-ide-list-selector-item", "gx-ide-title", "gxg-button", "gxg-buttons-container", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-grid", "gxg-icon", "gxg-label", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-top-state-bar"];
+    const components = ["gx-ide-manage-module-references", "ch-grid", "ch-grid-column", "ch-grid-column-resize", "ch-grid-column-settings", "ch-grid-columnset", "ch-grid-settings", "ch-grid-settings-columns", "ch-icon", "ch-window", "ch-window-close", "gx-ide-container", "gx-ide-empty-state", "gx-ide-title", "gxg-button", "gxg-buttons-container", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-grid", "gxg-icon", "gxg-ide-loader", "gxg-label", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-top-state-bar"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-manage-module-references":
             if (!customElements.get(tagName)) {
@@ -336,62 +419,62 @@ function defineCustomElement$1() {
                 defineCustomElement$j();
             }
             break;
-        case "gx-ide-list-selector":
+        case "gx-ide-empty-state":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }
             break;
-        case "gx-ide-list-selector-item":
+        case "gx-ide-title":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "gx-ide-title":
+        case "gxg-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "gxg-button":
+        case "gxg-buttons-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "gxg-buttons-container":
+        case "gxg-combo-box":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "gxg-combo-box":
+        case "gxg-combo-box-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "gxg-combo-box-item":
+        case "gxg-form-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "gxg-form-checkbox":
+        case "gxg-form-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "gxg-form-radio":
+        case "gxg-form-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "gxg-form-text":
+        case "gxg-grid":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "gxg-grid":
+        case "gxg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "gxg-icon":
+        case "gxg-ide-loader":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }