@genexus/genexus-ide-ui 1.1.55 → 1.1.57

package/dist/genexus-ide-ui/{p-18bbaa49.entry.js.map → p-7c95f511.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["pluginDetailsCss","USER_ICON","getIconPath","category","name","colorType","CHEVRON_DOWN_ICON","CHECK_CIRCLE_ICON","EXTENSION_ICON_IMG","getAssetPath","CSS_BUNDLES","GxIdePluginDetails","_GxIdePluginDetails_componentLocale","set","this","_GxIdePluginDetails_chMarkdownViewer","_GxIdePluginDetails_docSectionIdDescriptionMap","Map","_GxIdePluginDetails_versionsMenuOptionsModel","versionsToUpdateMenusModel","_a","data","versions","map","version","id","caption","_GxIdePluginDetails_menuVersionSelectedHandler","event","selectedVersion","detail","installCallback","_GxIdePluginDetails_renderUninstallButton","h","class","onClick","__classPrivateFieldGet","_GxIdePluginDetails_uninstallClickedHandler","actions","uninstall","_GxIdePluginDetails_installClickedHandler","_GxIdePluginDetails_updateVersionHandler","_GxIdePluginDetails_openLinkHandler","link","openLinkCallback","preventDefault","uninstallCallback","_GxIdePluginDetails_renderActionButtons","actionButtonCaption","actionButtonClasses","actionButtonCallback","moreVersionsToUpdate","length","installed","install","updateVersion","updateTo","call","blockAlign","inlineAlign","model","onButtonClick","src","_GxIdePluginDetails_tabSelectionChangedHandler","selectedTabId","newSelectedId","_GxIdePluginDetails_renderDocSectionsSlots","docsTabModel","docSectionTab","markdownValue","get","ref","el","__classPrivateFieldSet","slot","key","theme","value","_GxIdePluginDetails_returnFormatedId","rawId","toLowerCase","replace","_GxIdePluginDetails_renderLinkTag","href","label","cssClass","chImageSrc","target","_GxIdePluginDetails_renderAsideContent","infoCategories","infoCategory","fields__list","displayAsTags","fields","field","fieldValue","url","text","componentWillLoad","Locale","getComponentStrings","docSections","docSection","i","formatedId","content","componentDidLoad","addEventListener","path","composedPath","find","HTMLAnchorElement","render","renderActionButtons","titleLinkDataText","titleLinkDataUrl","titleHasLink","titleText","publisherDataText","publisher","publisherDataUrl","publisherHasLink","publisherText","Host","iconUrl","alt","description","tabListPosition","overflow","contain","onSelectedItemChange","selectedId"],"sources":["src/components/plugin-details/plugin-details.scss?tag=gx-ide-plugin-details&encapsulation=shadow","src/components/plugin-details/plugin-details.tsx"],"sourcesContent":[":host {\n  display: grid;\n  block-size: 100%;\n  grid-template-areas:\n    \"header header\"\n    \"main aside\";\n  grid-template-rows: max-content 1fr;\n  grid-template-columns: 1fr 280px;\n  row-gap: 12px;\n}\n\n.section {\n  display: contents;\n}\n\n// header\n.header {\n  display: grid;\n  grid-area: header;\n  grid-template-areas: \"plugin-icon plugin-details\";\n  grid-template-columns: 64px 1fr;\n  column-gap: 16px;\n  padding: 24px 24px 16px 24px;\n}\n.plugin__icon {\n  grid-area: plugin-icon;\n  inline-size: 100%;\n  block-size: auto;\n  display: block;\n}\n.plugin__details {\n  grid-area: plugin-details;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.plugin__publisher {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.plugin__description {\n  line-height: 1.5; // WA: Text appears too tight.\n}\n.plugin__actions-container {\n  margin-block-start: 8px;\n  align-items: center;\n}\n.action-button {\n  min-inline-size: 100px;\n\n  &.more-versions-available {\n    border-start-end-radius: 0 !important;\n    border-end-end-radius: 0 !important;\n  }\n}\n.installed-container {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  // WA Biggest Mercury icon (icon-md) looks small in this case.\n  // Mercury should expose more icon sizes.\n  ch-image {\n    --ch-image-size: 20px;\n  }\n}\n\n// main\n.main {\n  grid-area: main;\n}\n.docsTab {\n  block-size: 100%;\n}\n\n// aside\n.aside {\n  grid-area: aside;\n  overflow: auto;\n  border-block-start: 1px solid var(--items-container__border-color);\n}\n.fields__list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  font-size: 12px;\n}\n.plugin__info-category {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &:not(:first-child) {\n    $space: 16px;\n    padding-block-start: $space;\n    margin-block-start: $space;\n    border-block-start: 1px solid var(--mer-border-color__on-elevation--01);\n  }\n}\n.fields__list:not(.fields__list--as-tags) {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  .field__li {\n    display: flex;\n    gap: 16px;\n  }\n}\n.fields__list--as-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n\n  .field__li {\n    border: 1px solid var(--mer-border-color__on-elevation--01);\n    padding: 2px 8px;\n    border-radius: 4px;\n\n    text-transform: lowercase;\n  }\n  .field__link {\n    color: var(--mer-text__on-surface);\n\n    &:hover {\n      color: var(--mer-accent__primary);\n    }\n    &:active {\n      color: var(--mer-accent__primary--hover);\n    }\n  }\n}\n\n.field__name,\n.field__value {\n  flex: 1;\n}\n// WA: Link styles should be defined Mercury\n.field__link {\n  color: var(--mer-accent__primary);\n  &:hover {\n    color: var(--mer-accent__primary--hover);\n  }\n  &:active {\n    color: var(--mer-accent__primary--active);\n  }\n}\n// WA: Remove tab elevation background color\n.docsTab {\n  background-color: transparent !important;\n}\n\n// WA: Styles for \"button-icon-only\" should be defined on mercury\n.dropdown.button-icon-only::part(expandable-button) {\n  padding: calc(\n    (\n        var(--control__block-size) - 2 *\n          var(--control__border-width) - var(--mer-icon__box--md)\n      ) /\n      2\n  ) !important;\n  border-start-start-radius: 0 !important;\n  border-end-start-radius: 0 !important;\n}\n\n.version-buttons-container {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n}\n\nch-markdown-viewer {\n  block-size: 100%;\n  overflow: auto;\n}\n\n// WA: Need text with underline. This should be defined on Mercury\n.text-underline {\n  text-decoration: underline;\n}\n","import {\n  Component,\n  Host,\n  State,\n  Prop,\n  Element,\n  h,\n  getAssetPath,\n  JSX\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ActionMenuModel, TabModel } from \"@genexus/chameleon-controls-library\";\nimport { TabItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/tab/types\";\n\nconst USER_ICON = getIconPath({\n  category: \"system\",\n  name: \"user\",\n  colorType: \"on-elevation\"\n});\nconst CHEVRON_DOWN_ICON = getIconPath({\n  category: \"system\",\n  name: \"chevron-down\",\n  colorType: \"on-primary\"\n});\nconst CHECK_CIRCLE_ICON = getIconPath({\n  category: \"system\",\n  name: \"check-circle\",\n  colorType: \"success\"\n});\n\n// plugin icon if no iconUri was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n  `./gx-ide-assets/plugin-manager/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"chameleon/scrollbar\",\n  \"components/button\",\n  \"components/dropdown\",\n  \"components/edit\",\n  \"components/icon\",\n  \"components/list-box\",\n  \"components/tab\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"utils/typography\"\n];\n\n@Component({\n  tag: \"gx-ide-plugin-details\",\n  styleUrl: \"plugin-details.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/plugin-details\"]\n})\nexport class GxIdePluginDetails {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  #chMarkdownViewer: HTMLChMarkdownViewerElement;\n\n  // A map between docSection \"id\", and docSection \"description\".\n  // \"id\" is generated inside this component.\n  #docSectionIdDescriptionMap: Map<string, string> = new Map();\n\n  @Element() el: HTMLGxIdePluginDetailsElement;\n\n  @State() docsTabModel: TabModel = [];\n  @State() selectedTabId: string;\n\n  /**\n   * Specifies all the information related to a plugin.\n   */\n  @Prop() readonly data!: PluginDetailsData;\n\n  /**\n   * Callback that should be invoked when the user performs the install or update action.\n   * Receives an optional version string when a specific version is selected.\n   */\n  @Prop() readonly installCallback!: (version?: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user attempts to open any link displayed in this component.\n   */\n  @Prop() readonly openLinkCallback!: (url: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user performs the uninstall action.\n   */\n  @Prop() readonly uninstallCallback!: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    if (this.data.docSections?.length) {\n      this.docsTabModel = this.data.docSections.map((docSection, i) => {\n        const formatedId = this.#returnFormatedId(docSection.name);\n\n        this.#docSectionIdDescriptionMap.set(formatedId, docSection.content);\n\n        if (i === 0) {\n          this.selectedTabId = formatedId;\n        }\n        return {\n          id: formatedId,\n          name: docSection.name\n        } as TabItemModel;\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.#chMarkdownViewer.addEventListener(\"click\", event => {\n      // Listens for clicks on links inside <ch-markdown-viewer>.\n      // If a link (<a>) is clicked and openLinkCallback is defined,\n      // it prevents the default navigation and delegates the event\n      // to this.#openLinkHandler, passing the link's href.\n      const path = event.composedPath() as EventTarget[];\n\n      const link = path.find(el => el instanceof HTMLAnchorElement) as\n        | HTMLAnchorElement\n        | undefined;\n\n      if (link?.href) {\n        this.#openLinkHandler(link.href)(event);\n      }\n    });\n  }\n\n  #versionsMenuOptionsModel = (): ActionMenuModel => {\n    const versionsToUpdateMenusModel: ActionMenuModel = this.data.versions?.map(\n      version => {\n        return { id: version, caption: version };\n      }\n    );\n    return versionsToUpdateMenusModel;\n  };\n\n  #menuVersionSelectedHandler = (\n    event: CustomEvent<{\n      id?: string;\n    }>\n  ) => {\n    const selectedVersion = event.detail.id;\n    this.installCallback(selectedVersion);\n  };\n\n  #renderUninstallButton = (): JSX.Element => {\n    return (\n      <button class=\"button-tertiary\" onClick={this.#uninstallClickedHandler}>\n        {this.#componentLocale.actions.uninstall}\n      </button>\n    );\n  };\n\n  #installClickedHandler = () => {\n    this.installCallback();\n  };\n\n  #updateVersionHandler = (id: string) => () => {\n    this.installCallback(id);\n  };\n\n  #openLinkHandler = (link: string) => (event: MouseEvent) => {\n    if (this.openLinkCallback) {\n      event.preventDefault();\n      this.openLinkCallback(link);\n    }\n  };\n\n  #uninstallClickedHandler = () => {\n    this.uninstallCallback();\n  };\n\n  #renderActionButtons = (): JSX.Element => {\n    let actionButtonCaption;\n    let actionButtonClasses = \"button-primary action-button\";\n    let actionButtonCallback;\n    const moreVersionsToUpdate = this.data.versions?.length;\n\n    if (!this.data.installed) {\n      actionButtonCaption = this.#componentLocale.actions.install;\n      actionButtonCallback = this.#installClickedHandler;\n    } else if (this.data.updateVersion) {\n      actionButtonCaption = `${this.#componentLocale.actions.updateTo} ${\n        this.data.updateVersion\n      }`;\n      actionButtonCallback = this.#updateVersionHandler(\n        this.data.updateVersion\n      );\n    } else {\n      actionButtonCaption = this.#componentLocale.actions.installed;\n    }\n\n    if (moreVersionsToUpdate) {\n      actionButtonClasses = `${actionButtonClasses} more-versions-available`;\n    }\n\n    return [\n      <div class=\"version-buttons-container\">\n        <button class={actionButtonClasses} onClick={actionButtonCallback}>\n          {actionButtonCaption}\n        </button>\n        {moreVersionsToUpdate ? (\n          <ch-action-menu-render\n            class=\"dropdown button-primary button-icon-only\"\n            blockAlign=\"outside-end\"\n            inlineAlign=\"inside-start\"\n            model={this.#versionsMenuOptionsModel()}\n            onButtonClick={this.#menuVersionSelectedHandler}\n          >\n            <ch-image src={CHEVRON_DOWN_ICON} class=\"icon-md\"></ch-image>\n          </ch-action-menu-render>\n        ) : null}\n      </div>\n    ];\n  };\n\n  #tabSelectionChangedHandler = (\n    event: CustomEvent<{\n      lastSelectedIndex: number;\n      newSelectedId: string;\n      newSelectedIndex: number;\n    }>\n  ): void => {\n    this.selectedTabId = event.detail.newSelectedId;\n  };\n\n  #renderDocSectionsSlots = (): JSX.Element => {\n    return this.docsTabModel.map(docSectionTab => {\n      if (docSectionTab.id === this.selectedTabId) {\n        const markdownValue = this.#docSectionIdDescriptionMap.get(\n          docSectionTab.id\n        );\n\n        return (\n          <ch-markdown-viewer\n            ref={(el: HTMLChMarkdownViewerElement) =>\n              (this.#chMarkdownViewer = el as HTMLChMarkdownViewerElement)\n            }\n            slot={docSectionTab.id}\n            key={docSectionTab.id}\n            class=\"markdown spacing-body scrollable\"\n            theme=\"components/markdown-viewer\"\n            value={markdownValue}\n          ></ch-markdown-viewer>\n        );\n      }\n    });\n  };\n\n  #returnFormatedId = (rawId: string): string => {\n    return rawId.toLowerCase().replace(/\\s+/g, \"-\");\n  };\n\n  #renderLinkTag = (\n    href: string,\n    label: string,\n    cssClass?: string,\n    chImageSrc?: string\n  ): HTMLAnchorElement => {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        onClick={this.#openLinkHandler(href)}\n        class={cssClass}\n      >\n        {chImageSrc && <ch-image src={chImageSrc} class=\"icon-md\"></ch-image>}\n        {label}\n      </a>\n    );\n  };\n\n  #renderAsideContent = (): JSX.Element => {\n    return this.data.infoCategories.map(infoCategory => {\n      return (\n        <div class=\"plugin__info-category\">\n          <h3 class=\"subtitle-semi-bold-s\">{infoCategory.name}</h3>\n          <ul\n            class={{\n              \"fields__list\": true,\n              \"fields__list--as-tags\": infoCategory.displayAsTags\n            }}\n          >\n            {infoCategory.fields.map(field => {\n              // If the field name isn’t specified, only the value is shown — usually a link.\n              const fieldValue: string | HTMLAnchorElement =\n                typeof field.value === \"string\"\n                  ? (field.value as string)\n                  : this.#renderLinkTag(\n                      (field.value as LinkData).url,\n                      (field.value as LinkData).text,\n                      \"field__link\"\n                    );\n              return (\n                <li class=\"field__li\">\n                  {field.name && !infoCategory.displayAsTags\n                    ? // displaysAsTags forces the items to be displayed as tags\n                      // no span.field__name and span.field__value\n                      [\n                        <span class=\"field__name body-semi-bold-s\">\n                          {field.name}\n                        </span>,\n                        <span class=\"field__value body-regular-s\">\n                          {fieldValue}\n                        </span>\n                      ]\n                    : fieldValue}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    });\n  };\n\n  render() {\n    const renderActionButtons =\n      !this.data.installed ||\n      (this.data.installed && !!this.data.updateVersion);\n\n    const titleLinkDataText = (this.data.name as LinkData).text;\n    const titleLinkDataUrl = (this.data.name as LinkData).url;\n    const titleHasLink = titleLinkDataText && titleLinkDataUrl;\n    const titleText = titleLinkDataText || this.data.name;\n\n    const publisherDataText = (this.data.publisher as LinkData).text;\n    const publisherDataUrl = (this.data.publisher as LinkData).url;\n    const publisherHasLink = publisherDataText && publisherDataUrl;\n    const publisherText = publisherDataText || this.data.publisher;\n\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <header class=\"header\">\n            <img\n              class=\"plugin__icon\"\n              src={this.data.iconUrl || EXTENSION_ICON_IMG}\n              alt=\"plugin extension icon\"\n            />\n            <div class=\"plugin__details\">\n              {titleHasLink ? (\n                <h2 class=\"heading-5 has-link\">\n                  {this.#renderLinkTag(\n                    titleLinkDataUrl,\n                    titleText as string,\n                    \"text-underline\"\n                  )}\n                </h2>\n              ) : (\n                <h2 class=\"heading-5\">{titleText}</h2>\n              )}\n              {publisherHasLink ? (\n                this.#renderLinkTag(\n                  publisherDataUrl,\n                  titleText as string,\n                  \"text-underline plugin__publisher tiny-semi-bold-l\",\n                  USER_ICON\n                )\n              ) : (\n                <p class=\"plugin__publisher tiny-semi-bold-l\">\n                  <ch-image src={USER_ICON} class=\"icon-md\"></ch-image>\n                  {publisherText}\n                </p>\n              )}\n\n              <p class=\"plugin__description\">{this.data.description}</p>\n              <div class=\"buttons-spacer plugin__actions-container\">\n                {renderActionButtons ? (\n                  this.#renderActionButtons()\n                ) : (\n                  // installed and no updates\n                  <p class=\"installed-container subtitle-semi-bold-s\">\n                    <ch-image\n                      src={CHECK_CIRCLE_ICON}\n                      class=\"icon-md\"\n                    ></ch-image>\n                    {this.#componentLocale.actions.installed}\n                  </p>\n                )}\n                {this.data.installed && this.#renderUninstallButton()}\n              </div>\n            </div>\n          </header>\n          <div class=\"main\">\n            {this.docsTabModel.length > 0 && (\n              <ch-tab-render\n                class=\"tab docsTab scrollable\"\n                tabListPosition=\"block-start\"\n                overflow=\"auto\"\n                contain=\"size\"\n                model={this.docsTabModel}\n                onSelectedItemChange={this.#tabSelectionChangedHandler}\n                selectedId={this.selectedTabId}\n              >\n                {this.#renderDocSectionsSlots()}\n              </ch-tab-render>\n            )}\n          </div>\n          <div class=\"aside spacing-body scrollable\">\n            {this.#renderAsideContent()}\n          </div>\n        </section>\n        {/* <slot></slot> */}\n      </Host>\n    );\n  }\n}\n\n// plugin-details.types.ts\n\nexport type LinkData = {\n  text: string;\n  url: string;\n};\n\nexport type PluginFieldData = {\n  name?: string;\n  value: string | LinkData;\n};\n\nexport type PluginInfoCategoryData = {\n  name: string;\n  fields: PluginFieldData[];\n  displayAsTags: boolean;\n};\n\nexport type DocSectionData = {\n  name: string;\n  content: string;\n};\n\nexport type PluginDetailsData = {\n  id: string;\n  name: string | LinkData;\n  publisher: string | LinkData;\n  installed: boolean;\n  updateVersion?: string;\n  versions: string[];\n  iconUrl: string;\n  description: string;\n  docSections: DocSectionData[];\n  infoCategories: PluginInfoCategoryData[];\n};\n"],"mappings":"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"}
+{"version":3,"names":["pluginDetailsCss","USER_ICON","getIconPath","category","name","colorType","CHEVRON_DOWN_ICON","CHECK_CIRCLE_ICON","EXTENSION_ICON_IMG","getAssetPath","CSS_BUNDLES","GxIdePluginDetails","_GxIdePluginDetails_componentLocale","set","this","_GxIdePluginDetails_chMarkdownViewer","_GxIdePluginDetails_docSectionIdDescriptionMap","Map","_GxIdePluginDetails_versionsMenuOptionsModel","versionsToUpdateMenusModel","_a","data","versions","map","version","id","caption","_GxIdePluginDetails_menuVersionSelectedHandler","event","selectedVersion","detail","installCallback","_GxIdePluginDetails_renderUninstallButton","h","class","onClick","__classPrivateFieldGet","_GxIdePluginDetails_uninstallClickedHandler","actions","uninstall","_GxIdePluginDetails_installClickedHandler","_GxIdePluginDetails_updateVersionHandler","_GxIdePluginDetails_openLinkHandler","link","openLinkCallback","preventDefault","uninstallCallback","_GxIdePluginDetails_renderActionButtons","actionButtonCaption","actionButtonClasses","actionButtonCallback","moreVersionsToUpdate","length","installed","install","updateVersion","updateTo","call","blockAlign","inlineAlign","model","onButtonClick","src","_GxIdePluginDetails_tabSelectionChangedHandler","selectedTabId","newSelectedId","_GxIdePluginDetails_renderDocSectionsSlots","docsTabModel","docSectionTab","markdownValue","get","ref","el","__classPrivateFieldSet","slot","key","theme","value","_GxIdePluginDetails_returnFormatedId","rawId","toLowerCase","replace","_GxIdePluginDetails_renderLinkTag","href","label","cssClass","chImageSrc","target","_GxIdePluginDetails_renderAsideContent","infoCategories","infoCategory","fields__list","displayAsTags","fields","field","fieldValue","url","text","componentWillLoad","Locale","getComponentStrings","docSections","docSection","i","formatedId","content","componentDidLoad","addEventListener","path","composedPath","find","HTMLAnchorElement","render","renderActionButtons","titleLinkDataText","titleLinkDataUrl","titleHasLink","titleText","publisherDataText","publisher","publisherDataUrl","publisherHasLink","publisherText","Host","iconUrl","alt","description","tabListPosition","overflow","contain","onSelectedItemChange","selectedId"],"sources":["src/components/plugin-details/plugin-details.scss?tag=gx-ide-plugin-details&encapsulation=shadow","src/components/plugin-details/plugin-details.tsx"],"sourcesContent":[":host {\n  display: grid;\n  block-size: 100%;\n  grid-template-areas:\n    \"header header\"\n    \"main aside\";\n  grid-template-rows: max-content 1fr;\n  grid-template-columns: 1fr 280px;\n  row-gap: 12px;\n}\n\n.section {\n  display: contents;\n}\n\n// header\n.header {\n  display: grid;\n  grid-area: header;\n  grid-template-areas: \"plugin-icon plugin-details\";\n  grid-template-columns: 64px 1fr;\n  column-gap: 16px;\n  padding: 24px 24px 16px 24px;\n}\n.plugin__icon {\n  grid-area: plugin-icon;\n  inline-size: 100%;\n  block-size: auto;\n  display: block;\n}\n.plugin__details {\n  grid-area: plugin-details;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.plugin__publisher {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.plugin__description {\n  line-height: 1.5; // WA: Text appears too tight.\n}\n.plugin__actions-container {\n  margin-block-start: 8px;\n  align-items: center;\n}\n.action-button {\n  min-inline-size: 100px;\n\n  &.more-versions-available {\n    border-start-end-radius: 0 !important;\n    border-end-end-radius: 0 !important;\n  }\n}\n.installed-container {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  // WA Biggest Mercury icon (icon-md) looks small in this case.\n  // Mercury should expose more icon sizes.\n  ch-image {\n    --ch-image-size: 20px;\n  }\n}\n\n// main\n.main {\n  grid-area: main;\n}\n.docsTab {\n  block-size: 100%;\n}\n\n// aside\n.aside {\n  grid-area: aside;\n  overflow: auto;\n  border-block-start: 1px solid var(--items-container__border-color);\n}\n.fields__list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  font-size: 12px;\n}\n.plugin__info-category {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &:not(:first-child) {\n    $space: 16px;\n    padding-block-start: $space;\n    margin-block-start: $space;\n    border-block-start: 1px solid var(--mer-border-color__on-elevation--01);\n  }\n}\n.fields__list:not(.fields__list--as-tags) {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  .field__li {\n    display: flex;\n    gap: 16px;\n  }\n}\n.fields__list--as-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n\n  .field__li {\n    border: 1px solid var(--mer-border-color__on-elevation--01);\n    padding: 2px 8px;\n    border-radius: 4px;\n\n    text-transform: lowercase;\n  }\n  .field__link {\n    color: var(--mer-text__on-surface);\n\n    &:hover {\n      color: var(--mer-accent__primary);\n    }\n    &:active {\n      color: var(--mer-accent__primary--hover);\n    }\n  }\n}\n\n.field__name,\n.field__value {\n  flex: 1;\n}\n// WA: Link styles should be defined Mercury\n.field__link {\n  color: var(--mer-accent__primary);\n  &:hover {\n    color: var(--mer-accent__primary--hover);\n  }\n  &:active {\n    color: var(--mer-accent__primary--active);\n  }\n}\n// WA: Remove tab elevation background color\n.docsTab {\n  background-color: transparent !important;\n}\n\n// WA: Styles for \"button-icon-only\" should be defined on mercury\n.dropdown.button-icon-only::part(expandable-button) {\n  padding: calc(\n    (\n        var(--control__block-size) - 2 *\n          var(--control__border-width) - var(--mer-icon__box--md)\n      ) /\n      2\n  ) !important;\n  border-start-start-radius: 0 !important;\n  border-end-start-radius: 0 !important;\n}\n\n.version-buttons-container {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n}\n\nch-markdown-viewer {\n  block-size: 100%;\n  overflow: auto;\n}\n\n// WA: Need text with underline. This should be defined on Mercury\n.text-underline {\n  text-decoration: underline;\n}\n","import {\n  Component,\n  Host,\n  State,\n  Prop,\n  Element,\n  h,\n  getAssetPath,\n  JSX\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ActionMenuModel, TabModel } from \"@genexus/chameleon-controls-library\";\nimport { TabItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/tab/types\";\n\nconst USER_ICON = getIconPath({\n  category: \"system\",\n  name: \"user\",\n  colorType: \"on-elevation\"\n});\nconst CHEVRON_DOWN_ICON = getIconPath({\n  category: \"system\",\n  name: \"chevron-down\",\n  colorType: \"on-primary\"\n});\nconst CHECK_CIRCLE_ICON = getIconPath({\n  category: \"system\",\n  name: \"check-circle\",\n  colorType: \"success\"\n});\n\n// plugin icon if no iconUri was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n  `./gx-ide-assets/plugin-manager/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"chameleon/scrollbar\",\n  \"components/button\",\n  \"components/dropdown\",\n  \"components/edit\",\n  \"components/icon\",\n  \"components/list-box\",\n  \"components/tab\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"utils/typography\"\n];\n\n@Component({\n  tag: \"gx-ide-plugin-details\",\n  styleUrl: \"plugin-details.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/plugin-details\"]\n})\nexport class GxIdePluginDetails {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  #chMarkdownViewer: HTMLChMarkdownViewerElement;\n\n  // A map between docSection \"id\", and docSection \"description\".\n  // \"id\" is generated inside this component.\n  #docSectionIdDescriptionMap: Map<string, string> = new Map();\n\n  @Element() el: HTMLGxIdePluginDetailsElement;\n\n  @State() docsTabModel: TabModel = [];\n  @State() selectedTabId: string;\n\n  /**\n   * Specifies all the information related to a plugin.\n   */\n  @Prop() readonly data!: PluginDetailsData;\n\n  /**\n   * Callback that should be invoked when the user performs the install or update action.\n   * Receives an optional version string when a specific version is selected.\n   */\n  @Prop() readonly installCallback!: (version?: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user attempts to open any link displayed in this component.\n   */\n  @Prop() readonly openLinkCallback!: (url: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user performs the uninstall action.\n   */\n  @Prop() readonly uninstallCallback!: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    if (this.data.docSections?.length) {\n      this.docsTabModel = this.data.docSections.map((docSection, i) => {\n        const formatedId = this.#returnFormatedId(docSection.name);\n\n        this.#docSectionIdDescriptionMap.set(formatedId, docSection.content);\n\n        if (i === 0) {\n          this.selectedTabId = formatedId;\n        }\n        return {\n          id: formatedId,\n          name: docSection.name\n        } as TabItemModel;\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.#chMarkdownViewer.addEventListener(\"click\", event => {\n      // Listens for clicks on links inside <ch-markdown-viewer>.\n      // If a link (<a>) is clicked and openLinkCallback is defined,\n      // it prevents the default navigation and delegates the event\n      // to this.#openLinkHandler, passing the link's href.\n      const path = event.composedPath() as EventTarget[];\n\n      const link = path.find(el => el instanceof HTMLAnchorElement) as\n        | HTMLAnchorElement\n        | undefined;\n\n      if (link?.href) {\n        this.#openLinkHandler(link.href)(event);\n      }\n    });\n  }\n\n  #versionsMenuOptionsModel = (): ActionMenuModel => {\n    const versionsToUpdateMenusModel: ActionMenuModel = this.data.versions?.map(\n      version => {\n        return { id: version, caption: version };\n      }\n    );\n    return versionsToUpdateMenusModel;\n  };\n\n  #menuVersionSelectedHandler = (\n    event: CustomEvent<{\n      id?: string;\n    }>\n  ) => {\n    const selectedVersion = event.detail.id;\n    this.installCallback(selectedVersion);\n  };\n\n  #renderUninstallButton = (): JSX.Element => {\n    return (\n      <button class=\"button-tertiary\" onClick={this.#uninstallClickedHandler}>\n        {this.#componentLocale.actions.uninstall}\n      </button>\n    );\n  };\n\n  #installClickedHandler = () => {\n    this.installCallback();\n  };\n\n  #updateVersionHandler = (id: string) => () => {\n    this.installCallback(id);\n  };\n\n  #openLinkHandler = (link: string) => (event: MouseEvent) => {\n    if (this.openLinkCallback) {\n      event.preventDefault();\n      this.openLinkCallback(link);\n    }\n  };\n\n  #uninstallClickedHandler = () => {\n    this.uninstallCallback();\n  };\n\n  #renderActionButtons = (): JSX.Element => {\n    let actionButtonCaption;\n    let actionButtonClasses = \"button-primary action-button\";\n    let actionButtonCallback;\n    const moreVersionsToUpdate = this.data.versions?.length;\n\n    if (!this.data.installed) {\n      actionButtonCaption = this.#componentLocale.actions.install;\n      actionButtonCallback = this.#installClickedHandler;\n    } else if (this.data.updateVersion) {\n      actionButtonCaption = `${this.#componentLocale.actions.updateTo} ${\n        this.data.updateVersion\n      }`;\n      actionButtonCallback = this.#updateVersionHandler(\n        this.data.updateVersion\n      );\n    } else {\n      actionButtonCaption = this.#componentLocale.actions.installed;\n    }\n\n    if (moreVersionsToUpdate) {\n      actionButtonClasses = `${actionButtonClasses} more-versions-available`;\n    }\n\n    return [\n      <div class=\"version-buttons-container\">\n        <button class={actionButtonClasses} onClick={actionButtonCallback}>\n          {actionButtonCaption}\n        </button>\n        {moreVersionsToUpdate ? (\n          <ch-action-menu-render\n            class=\"dropdown button-primary button-icon-only\"\n            blockAlign=\"outside-end\"\n            inlineAlign=\"inside-start\"\n            model={this.#versionsMenuOptionsModel()}\n            onButtonClick={this.#menuVersionSelectedHandler}\n          >\n            <ch-image src={CHEVRON_DOWN_ICON} class=\"icon-md\"></ch-image>\n          </ch-action-menu-render>\n        ) : null}\n      </div>\n    ];\n  };\n\n  #tabSelectionChangedHandler = (\n    event: CustomEvent<{\n      lastSelectedIndex: number;\n      newSelectedId: string;\n      newSelectedIndex: number;\n    }>\n  ): void => {\n    this.selectedTabId = event.detail.newSelectedId;\n  };\n\n  #renderDocSectionsSlots = (): JSX.Element => {\n    return this.docsTabModel.map(docSectionTab => {\n      if (docSectionTab.id === this.selectedTabId) {\n        const markdownValue = this.#docSectionIdDescriptionMap.get(\n          docSectionTab.id\n        );\n\n        return (\n          <ch-markdown-viewer\n            ref={(el: HTMLChMarkdownViewerElement) =>\n              (this.#chMarkdownViewer = el as HTMLChMarkdownViewerElement)\n            }\n            slot={docSectionTab.id}\n            key={docSectionTab.id}\n            class=\"markdown spacing-body scrollable\"\n            theme=\"components/markdown-viewer\"\n            value={markdownValue}\n          ></ch-markdown-viewer>\n        );\n      }\n    });\n  };\n\n  #returnFormatedId = (rawId: string): string => {\n    return rawId.toLowerCase().replace(/\\s+/g, \"-\");\n  };\n\n  #renderLinkTag = (\n    href: string,\n    label: string,\n    cssClass?: string,\n    chImageSrc?: string\n  ): HTMLAnchorElement => {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        onClick={this.#openLinkHandler(href)}\n        class={cssClass}\n      >\n        {chImageSrc && <ch-image src={chImageSrc} class=\"icon-md\"></ch-image>}\n        {label}\n      </a>\n    );\n  };\n\n  #renderAsideContent = (): JSX.Element => {\n    return this.data.infoCategories.map(infoCategory => {\n      return (\n        <div class=\"plugin__info-category\">\n          <h3 class=\"subtitle-semi-bold-s\">{infoCategory.name}</h3>\n          <ul\n            class={{\n              \"fields__list\": true,\n              \"fields__list--as-tags\": infoCategory.displayAsTags\n            }}\n          >\n            {infoCategory.fields.map(field => {\n              // If the field name isn’t specified, only the value is shown — usually a link.\n              const fieldValue: string | HTMLAnchorElement =\n                typeof field.value === \"string\"\n                  ? (field.value as string)\n                  : this.#renderLinkTag(\n                      (field.value as LinkData).url,\n                      (field.value as LinkData).text,\n                      \"field__link\"\n                    );\n              return (\n                <li class=\"field__li\">\n                  {field.name && !infoCategory.displayAsTags\n                    ? // displaysAsTags forces the items to be displayed as tags\n                      // no span.field__name and span.field__value\n                      [\n                        <span class=\"field__name body-semi-bold-s\">\n                          {field.name}\n                        </span>,\n                        <span class=\"field__value body-regular-s\">\n                          {fieldValue}\n                        </span>\n                      ]\n                    : fieldValue}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    });\n  };\n\n  render() {\n    const renderActionButtons =\n      !this.data.installed ||\n      (this.data.installed && !!this.data.updateVersion);\n\n    const titleLinkDataText = (this.data.name as LinkData).text;\n    const titleLinkDataUrl = (this.data.name as LinkData).url;\n    const titleHasLink = titleLinkDataText && titleLinkDataUrl;\n    const titleText = titleLinkDataText || this.data.name;\n\n    const publisherDataText = (this.data.publisher as LinkData).text;\n    const publisherDataUrl = (this.data.publisher as LinkData).url;\n    const publisherHasLink = publisherDataText && publisherDataUrl;\n    const publisherText = publisherDataText || this.data.publisher;\n\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <header class=\"header\">\n            <img\n              class=\"plugin__icon\"\n              src={this.data.iconUrl || EXTENSION_ICON_IMG}\n              alt=\"plugin extension icon\"\n            />\n            <div class=\"plugin__details\">\n              {titleHasLink ? (\n                <h2 class=\"heading-5 has-link\">\n                  {this.#renderLinkTag(\n                    titleLinkDataUrl,\n                    titleText as string,\n                    \"text-underline\"\n                  )}\n                </h2>\n              ) : (\n                <h2 class=\"heading-5\">{titleText}</h2>\n              )}\n              {publisherHasLink ? (\n                this.#renderLinkTag(\n                  publisherDataUrl,\n                  titleText as string,\n                  \"text-underline plugin__publisher tiny-semi-bold-l\",\n                  USER_ICON\n                )\n              ) : (\n                <p class=\"plugin__publisher tiny-semi-bold-l\">\n                  <ch-image src={USER_ICON} class=\"icon-md\"></ch-image>\n                  {publisherText}\n                </p>\n              )}\n\n              <p class=\"plugin__description\">{this.data.description}</p>\n              <div class=\"buttons-spacer plugin__actions-container\">\n                {renderActionButtons ? (\n                  this.#renderActionButtons()\n                ) : (\n                  // installed and no updates\n                  <p class=\"installed-container subtitle-semi-bold-s\">\n                    <ch-image\n                      src={CHECK_CIRCLE_ICON}\n                      class=\"icon-md\"\n                    ></ch-image>\n                    {this.#componentLocale.actions.installed}\n                  </p>\n                )}\n                {this.data.installed && this.#renderUninstallButton()}\n              </div>\n            </div>\n          </header>\n          <div class=\"main\">\n            {this.docsTabModel.length > 0 && (\n              <ch-tab-render\n                class=\"tab docsTab scrollable\"\n                tabListPosition=\"block-start\"\n                overflow=\"auto\"\n                contain=\"size\"\n                model={this.docsTabModel}\n                onSelectedItemChange={this.#tabSelectionChangedHandler}\n                selectedId={this.selectedTabId}\n              >\n                {this.#renderDocSectionsSlots()}\n              </ch-tab-render>\n            )}\n          </div>\n          <div class=\"aside spacing-body scrollable\">\n            {this.#renderAsideContent()}\n          </div>\n        </section>\n        {/* <slot></slot> */}\n      </Host>\n    );\n  }\n}\n\n// plugin-details.types.ts\n\nexport type LinkData = {\n  text: string;\n  url: string;\n};\n\nexport type PluginFieldData = {\n  name?: string;\n  value: string | LinkData;\n};\n\nexport type PluginInfoCategoryData = {\n  name: string;\n  fields: PluginFieldData[];\n  displayAsTags: boolean;\n};\n\nexport type DocSectionData = {\n  name: string;\n  content: string;\n};\n\nexport type PluginDetailsData = {\n  id: string;\n  name: string | LinkData;\n  publisher: string | LinkData;\n  installed: boolean;\n  updateVersion?: string;\n  versions: string[];\n  iconUrl: string;\n  description: string;\n  docSections: DocSectionData[];\n  infoCategories: PluginInfoCategoryData[];\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-eedb407c.entry.js → p-7e3cccf7.entry.js}

@@ -1,6 +1,14 @@
 import { r as e, c as t, h as r, H as i, a } from "./p-97107ecc.js";
 
-import { g as o } from "./p-401bfc97.js";
+import { g as o } from "./p-d42e842b.js";
+
+import "./p-d4ecd3bb.js";
+
+import "lit";
+
+import "lit/directives/when.js";
+
+import "lit/directives/if-defined.js";
 
 import { r as s } from "./p-8c2e9df4.js";
 
@@ -487,4 +495,4 @@ c = new WeakMap, g = new WeakMap;
 f.style = n;
 
 export { f as gx_ide_manage_module_references };
-//# sourceMappingURL=p-eedb407c.entry.js.map
+//# sourceMappingURL=p-7e3cccf7.entry.js.map

package/dist/genexus-ide-ui/{p-eedb407c.entry.js.map → p-7e3cccf7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["manageModuleReferencesCss","CSS_BUNDLES","GxManageModuleReferences","this","renderedFirstTime","_GxManageModuleReferences_filterIcon","set","getIconPath","category","name","colorType","_GxManageModuleReferences_moduleIcon","updateModulesSelectedVersion","modulesAll","selectedServerId","selectedServerIdOnModulesAllUpdate","modulesSelectedVersion","clear","forEach","module","id","versions","length","newModule","get","undefined","getActionFromCurrentModuleVersion","action","getModuleData","selectedModule","onProgress","message","progress","state","data","selectedModuleAction","Object","assign","progressValue","progressState","handleModuleChange","event","selectedModuleId","detail","rowsId","foundModule","find","item","serverSelectedCallbackHandler","async","reload","serverSelectedCallback","loadingServer","resolvedObjects","filterModulesByType","filteredModules","handleFilterChange","value","trim","toLowerCase","filter","selectedVersionName","includes","handleFilterChangeHandler","e","executeActionCallbackHandler","executeActionCallback","moduleSelectedVersionId","actionCompleted","type","currentVersion","version","showModuleMenu","serverContextMenuCallback","buttonBoundingClientRect","target","getBoundingClientRect","selection","clientX","x","clientY","y","dataType","selectedVersionId","selectedVersion","selectedVersionData","moduleActionHandler","closeProgressBar","renderModulesGrid","h","rowSelectionMode","part","class","onSelectionChanged","settingable","size","map","rowid","key","selected","moduleVersionIconColor","color","disabled","fit","onClick","renderEmptyStateModules","stateIconSrc","__classPrivateFieldGet","stateTitle","_componentLocale","modules","noModulesFilter","moduleAction","moduleCurrentVersion","renderVersionName","renderVersionWarningMessage","warningMessage","renderInstalledVersion","caption","cssClass","modulesInformation","moduleProperties","installed","notInstalled","moduleVersionsValueChangedHandler","versionId","updateSelectedModuleVersion","moduleVersionsItemChangedHandler","reRenderCounter","renderModuleVersions","label","availableVersions","labelPosition","centerLabel","onValueChanged","onItemSelected","selectedButtonChangedHandler","replace","serverItemSelectedHandler","serverId","serverValueChangedHandler","progressBarCloseHandler","setTimeout","reloadServer","Map","modulesAllWatcher","loadingServerHandler","loading","loaderEl","show","componentDidRender","componentDidRenderFirstTime","emit","componentName","componentWillLoad","Locale","getComponentStrings","el","componentDidLoad","servers","onPropValueChange","newModulesData","validate","render","Host","model","noContentPadding","noAboveFooterPadding","noBorderAboveFooter","containerTitle","displayTitle","selectServer","disableFilter","showServerCommands","icon","searchModules","reduced","fullWidth","onSelectedButtonChanged","buttonsContainer","browse","updates","ref","serversDetail","renderModuleDataProperties","emptyState","title","stateDescription","description","slot","stateType","noBorder","progressBar","defaultCaption","active","closeType","closedCallback","loaderTitle","container","borderRadius"],"sources":["src/components/modules/manage-module-references/manage-module-references.scss?tag=gx-ide-manage-module-references&encapsulation=shadow","src/components/modules/manage-module-references/manage-module-references.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n\n/*--- General ---*/\np,\nul {\n  font-size: var(--font-size-lg);\n  margin: 0;\n}\np {\n  line-height: 1.6em;\n}\n/*--- Header ---*/\n.header {\n  align-items: center;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: 1fr;\n}\n.main {\n  display: grid;\n  //grid-template-columns: 1fr 2fr 1fr;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 1fr;\n  height: 100%;\n  overflow: auto;\n}\nch-grid-columnset {\n  display: none;\n}\nch-grid-row[selected] {\n  gxg-icon[data-action=\"install\"] {\n    //WA to improve visibility\n    filter: brightness(2);\n  }\n}\n.grid-cell-module {\n  &__info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--mer-spacing--3xs);\n  }\n  &__name {\n    font-weight: var(--mer-font__weight--bold);\n  }\n  &__name,\n  &__description {\n    line-height: 1.55em;\n  }\n}\n\n/*--- Servers Container ---*/\n.grid-container {\n  height: 100%;\n  overflow: auto;\n  gx-ide-empty-state {\n    height: 100%;\n  }\n}\n.servers-container {\n  display: none;\n  height: 100%;\n  &__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--gxg-list-box-main__padding) var(--gxg-list-box-main__padding)\n      0 var(--gxg-list-box-main__padding);\n\n    gxg-button {\n      width: 100%;\n    }\n  }\n}\n\n/*--- Modules (Header) ---*/\n.modules {\n  &__header {\n    padding: var(--gxg-list-box-main__padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n  }\n  &__combo-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n  }\n  &__server-commands {\n    display: flex;\n    gap: var(--mer-spacing--xs);\n  }\n  &__combo {\n    gxg-combo-box {\n      flex: 1;\n    }\n    display: flex;\n    flex-direction: row;\n    gap: var(--mer-spacing--xs);\n  }\n  &__container {\n    border-inline-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n    display: grid;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    overflow: auto;\n  }\n  &__main {\n    display: grid;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    overflow: auto;\n\n    &-header {\n      display: flex;\n      padding: var(--mer-spacing--xs);\n      flex-direction: column;\n      gap: var(--mer-spacing--xs);\n    }\n  }\n}\n\n/*--- Module Info ---*/\n.module-info {\n  display: grid;\n  grid-template-rows: auto 1fr;\n  height: 100%;\n  overflow: auto;\n\n  &__title {\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n  }\n\n  &__name {\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--sm);\n    --ds-icon-size-box--regular: 24px;\n    --ds-icon-size--regular: 24px;\n    font-weight: var(--mer-font__weight--bold);\n  }\n\n  &__header {\n    padding: var(--gx-ide-container__padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    border-block-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n  }\n\n  &__action-container {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n    &:before {\n      content: \"\";\n      width: var(--mer-spacing--xs);\n      height: var(--mer-spacing--xs);\n      border-radius: 50%;\n      display: block;\n      background-color: var(--mer-icon__primary--disabled);\n    }\n    &--installed:before {\n      background-color: var(--mer-icon__primary);\n    }\n    &--uninstallable:before {\n      background-color: var(--mer-icon__warning);\n    }\n  }\n\n  &__warning-message {\n    margin-block-start: var(--mer-spacing--2xs);\n    background-color: var(--mer-color__tinted-yellow--5);\n    color: var(--mer-text__on-elevation);\n    border: var(--mer-border__width--sm) solid var(--mer-border-color__warning);\n    border-radius: var(--mer-border__radius--sm);\n    padding: var(--mer-spacing--xs) var(--mer-spacing--md);\n  }\n\n  &__divider {\n    width: calc(100% - var(--gx-ide-container__padding) * 4);\n    padding: 0 var(--gx-ide-container__padding);\n    margin: 0 auto;\n    border: 0;\n    border-block-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n  }\n  &__properties {\n    display: flex;\n    flex-direction: column;\n    padding: var(--gx-ide-container__padding);\n    gap: var(--mer-spacing--xs);\n    overflow: auto;\n  }\n}\n\n.md-property {\n  display: grid;\n  gap: var(--mer-spacing--xs);\n\n  &--inline {\n    grid-template-columns: auto 1fr;\n  }\n  &--block {\n  }\n  &__key {\n    font-weight: var(--font-weight-bold);\n    max-width: 150px;\n  }\n  &__value {\n    font-size: var(--mer-font__size--2xs);\n  }\n  &__key,\n  &__value {\n    > * {\n      display: inline-block;\n    }\n  }\n  &__list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    > ul {\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      display: flex;\n      flex-direction: column;\n      gap: var(--mer-spacing--2xs);\n      margin-inline-start: var(--mer-spacing--xs);\n\n      li {\n        position: relative;\n        padding-inline-start: 12px;\n        line-height: var(--ds-base-font-line-height--comfortable);\n        &::before {\n          content: \"\";\n          position: absolute;\n          left: 0;\n          top: 7px;\n          display: inline-block;\n          width: var(--mer-spacing--2xs);\n          height: var(--mer-spacing--2xs);\n          background-color: var(--mer-text__on-surface);\n        }\n      }\n    }\n  }\n}\n\n.md-property,\n.md-property__list {\n  border-block-end: var(--mer-border__width--sm) solid\n    var(--gx-ide-container-border-color);\n  padding-block-end: var(--mer-spacing--xs);\n\n  &:last-child {\n    border-block-end: 0;\n    padding-block-end: 0;\n  }\n}\n\ngxg-ide-loader {\n  border-radius: var(--mer-border__radius--md);\n}\n\n.button-wrapper {\n  display: grid;\n  align-items: center;\n  justify-content: center;\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  State,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color } from \"@genexus/gemini\";\nimport { topStateBarType } from \"@genexus/gemini\";\nimport { TabularGridSelectionChangedEvent } from \"@genexus/chameleon-controls-library\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport {\n  ModuleServerData,\n  ModuleData,\n  ModuleActionType,\n  ModuleFilterType,\n  ModulePropertyData,\n  ModuleVersionData\n} from \"../types\";\nimport { renderModuleDataProperties } from \"../../../common/common\";\nimport { Locale } from \"../../../common/locale\";\nimport { ContextMenuInfo } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  // \"utils/form\",\n  // \"utils/layout\",\n  // \"utils/typography\",\n  // \"components/button\",\n  // \"components/checkbox\",\n  // \"components/edit\",\n  \"components/tabular-grid\"\n];\n\n@Component({\n  tag: \"gx-ide-manage-module-references\",\n  styleUrl: \"manage-module-references.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/manage-module-references\"]\n})\nexport class GxManageModuleReferences {\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  /* selectedServerIdOnModulesAllUpdate is updated every time modulesAll is modified, in order to determine if the server is the same or not.*/\n  private selectedServerIdOnModulesAllUpdate: string;\n\n  #filterIcon = getIconPath({\n    category: \"system\",\n    name: \"filters\",\n    colorType: \"on-elevation\"\n  });\n  #moduleIcon = getIconPath({\n    category: \"objects\",\n    name: \"module\"\n  });\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeManageModuleReferencesElement;\n  private loaderEl!: HTMLGxgIdeLoaderElement;\n  private serversDetail!: HTMLDivElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() modulesAll: ModuleData[] = [];\n  @Watch(\"modulesAll\")\n  modulesAllWatcher(modulesAll: ModuleData[]) {\n    this.updateModulesSelectedVersion(modulesAll);\n  }\n  @State() filteredModules: ModuleData[] = [];\n  @State() selectedModule: ModuleData;\n  @State() selectedServerId: string;\n  @State() selectedModuleAction: ActionInfo = {\n    message: \"\",\n    progress: 0,\n    state: \"in-progress\"\n  };\n  @State() modulesSelectedVersion: Map<string, string> = new Map();\n  @State() actionCompleted = true;\n  @State() closeProgressBar = true;\n  @State() progressValue: number = 0;\n  @State() progressState: topStateBarType = \"in-progress\";\n  @State() loadingServer = false;\n  @State() reRenderCounter: number = 0;\n  @Watch(\"loadingServer\")\n  loadingServerHandler(loading: boolean) {\n    if (loading) {\n      this.loaderEl.show = true;\n    } else {\n      this.loaderEl.show = false;\n    }\n  }\n\n  // 4.PUBLIC PROPERTY API //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * List of module servers currently cataloged\n   */\n  @Prop() readonly servers: ModuleServerData[] = [];\n\n  /**\n   * Callback invoked when a server is selected. Returns the set of modules available on that server.\n   */\n  @Prop() readonly serverSelectedCallback: ServerSelectedCallback;\n\n  /**\n   * Callback invoked when the user wants to execute the action corresponding to a selected module. When the action begins to be executed, the component must be able to show the progress of the action. For this, the onProgress parameter is available, which is in turn a callback used by the host to notify the progress by text message and percentage.\n   */\n  @Prop() readonly executeActionCallback: ExecuteActionCallback;\n\n  /**\n   * Callback invoked when Add button is clicked\n   */\n  @Prop() readonly addServerCallback: AddServerCallback;\n\n  /**\n   * Callback invoked when an element is right clicked on servers list\n   */\n  @Prop() readonly serverContextMenuCallback: ServerContextMenuCallback;\n\n  /**\n   * Allows you to hide the button (...) that executes serverContextMenuCallback, if we do not implement the commands in a first version\n   */\n  @Prop() readonly showServerCommands: boolean = false;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  async componentDidLoad() {\n    await this.serverSelectedCallbackHandler(this.servers[0].id, false);\n  }\n\n  // 7.LISTENERS //\n\n  @Watch(\"modulesAll\")\n  onPropValueChange(newModulesData: ModuleData[]) {\n    this.filteredModules = [...newModulesData];\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  /**\n   * validate\n   */\n  @Method()\n  async validate(): Promise<boolean> {\n    return true;\n  }\n\n  // 9.LOCAL METHODS //\n\n  private updateModulesSelectedVersion = (modulesAll: ModuleData[]) => {\n    if (this.selectedServerId !== this.selectedServerIdOnModulesAllUpdate) {\n      // the server has changed. clear the updateModulesSelectedVersion\n      this.modulesSelectedVersion.clear();\n      modulesAll.forEach(module => {\n        // this.modulesSelectedVersion.set(module.id, module.versions[0].id);\n        this.modulesSelectedVersion.set(\n          module.id,\n          module.versions[module.versions.length - 1].id\n        );\n      });\n    } else {\n      // the server has't changed. only add the module to the map, if it is a new module.\n      modulesAll.forEach(module => {\n        const newModule =\n          this.modulesSelectedVersion.get(module.id) === undefined;\n        if (newModule) {\n          this.modulesSelectedVersion.set(module.id, module.versions[0].id);\n        }\n      });\n    }\n    this.selectedServerIdOnModulesAllUpdate = this.selectedServerId;\n  };\n\n  private getActionFromCurrentModuleVersion = (): ModuleActionType => {\n    const action = this.getModuleData(\n      this.selectedModule,\n      \"action\"\n    ) as ModuleActionType;\n    return action || \"install\";\n  };\n\n  /**\n   * Callback invoked to get the progress when module is performing an action\n   */\n  private onProgress = (\n    message: string,\n    progress: number,\n    state: topStateBarType\n  ): void => {\n    const data = { message, progress, state };\n    this.selectedModuleAction = { ...data };\n    this.progressValue = this.selectedModuleAction.progress;\n    this.progressState = this.selectedModuleAction.state;\n  };\n\n  // 10.LOCAL METHODS //\n\n  /**\n   * Used for changing the selected module\n   */\n  private handleModuleChange = (\n    event: CustomEvent<TabularGridSelectionChangedEvent>\n  ) => {\n    const selectedModuleId = event.detail.rowsId[0];\n    const foundModule = this.modulesAll.find(\n      item => item.id === selectedModuleId\n    );\n    if (foundModule) {\n      this.selectedModule = foundModule;\n    }\n  };\n\n  /**\n   * Change the server selected value in response to callbackServerSelected callback\n   */\n  private serverSelectedCallbackHandler = async (id: any, reload: boolean) => {\n    if (this.serverSelectedCallback) {\n      this.loadingServer = true;\n      const resolvedObjects = await this.serverSelectedCallback(id, reload);\n      this.selectedServerId = id;\n      this.modulesAll = [...resolvedObjects];\n      this.filterModulesByType(\"browse\");\n      this.selectedModule = this.filteredModules[0];\n      this.loadingServer = false;\n    }\n  };\n\n  private handleFilterChange = (value: string) => {\n    value = value.trim().toLowerCase();\n    if (value) {\n      this.filteredModules = this.modulesAll.filter(module => {\n        const selectedVersionName = this.getModuleData(\n          module,\n          \"name\"\n        ) as string;\n        return selectedVersionName?.toLowerCase().includes(value);\n      });\n    } else {\n      this.filteredModules = this.modulesAll;\n    }\n  };\n\n  private handleFilterChangeHandler = (e: CustomEvent<string>) => {\n    const value = e.detail;\n    return this.handleFilterChange(value);\n  };\n\n  /**\n   * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback\n   */\n  private executeActionCallbackHandler = async (module: ModuleData) => {\n    if (this.executeActionCallback) {\n      const moduleSelectedVersionId = this.modulesSelectedVersion.get(\n        module.id\n      );\n      const actionCompleted = await this.executeActionCallback(\n        this.selectedServerId,\n        module.id,\n        moduleSelectedVersionId,\n        this.getActionFromCurrentModuleVersion(),\n        this.onProgress\n      );\n      if (actionCompleted) {\n        this.serverSelectedCallbackHandler(this.selectedServerId, false);\n      }\n      this.actionCompleted = actionCompleted;\n    }\n  };\n\n  private filterModulesByType = (type: ModuleFilterType) => {\n    // browse\n    if (type === \"browse\") {\n      this.filteredModules = this.modulesAll;\n    }\n    // installed\n    else if (type === \"installed\") {\n      this.filteredModules = this.modulesAll.filter((module: ModuleData) => {\n        // if the module has a currentVersion (not undefined) it means it is installed\n        return module.currentVersion;\n      });\n    } else if (type === \"updates\") {\n      this.filteredModules = this.modulesAll.filter((module: ModuleData) => {\n        return module.versions.find(version => version.action === \"update\");\n      });\n    }\n  };\n\n  private showModuleMenu = async (e: MouseEvent) => {\n    if (this.serverContextMenuCallback) {\n      const buttonBoundingClientRect = (\n        e.target as HTMLElement\n      ).getBoundingClientRect();\n      await this.serverContextMenuCallback({\n        selection: [this.selectedServerId],\n        clientX: buttonBoundingClientRect.x,\n        clientY: buttonBoundingClientRect.y\n      });\n    }\n  };\n\n  private getModuleData = (\n    module: ModuleData,\n    dataType: keyof ModuleVersionData\n  ): string | ModulePropertyData[] | undefined => {\n    const selectedVersionId = this.modulesSelectedVersion.get(module.id);\n    let selectedVersion;\n    let selectedVersionData;\n    if (selectedVersionId) {\n      selectedVersion = module.versions.find(\n        version => version.id === selectedVersionId\n      );\n    }\n    if (selectedVersion) {\n      selectedVersionData = selectedVersion[dataType];\n    }\n    return selectedVersionData;\n  };\n\n  private moduleActionHandler = (module: ModuleData) => () => {\n    this.actionCompleted = false;\n    this.closeProgressBar = false;\n    this.executeActionCallbackHandler(module);\n  };\n\n  private renderModulesGrid = (): Element => {\n    return (\n      <ch-tabular-grid\n        rowSelectionMode=\"single\"\n        part=\"ch-grid-pending-commits\"\n        class=\"tabular-grid servers-detail no-border\"\n        onSelectionChanged={this.handleModuleChange}\n      >\n        <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            settingable={false}\n            size=\"min-content\"\n          ></ch-tabular-grid-column>\n\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            settingable={false}\n          ></ch-tabular-grid-column>\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            settingable={false}\n            size=\"min-content\"\n          ></ch-tabular-grid-column>\n        </ch-tabular-grid-columnset>\n\n        {this.filteredModules.map((module: ModuleData) => (\n          <ch-tabular-grid-row\n            class=\"tabular-grid-row\"\n            rowid={module.id}\n            key={module.id}\n            selected={\n              this.selectedModule && this.selectedModule.id === module.id\n            }\n          >\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              <gxg-icon\n                type=\"objects/module\"\n                data-action={this.moduleVersionIconColor(module)}\n                color={this.moduleVersionIconColor(module)}\n                size=\"small\"\n              ></gxg-icon>\n            </ch-tabular-grid-cell>\n            <ch-tabular-grid-cell class=\"tabular-grid-cell grid-cell-module__info\">\n              <span class=\"grid-cell-module__name\">\n                {this.getModuleData(module, \"name\")}\n              </span>\n              <span class=\"grid-cell-module__description\">\n                {this.getModuleData(module, \"description\")}\n              </span>\n            </ch-tabular-grid-cell>\n\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              {this.selectedModule && this.selectedModule.id === module.id ? (\n                <div class=\"button-wrapper\">\n                  <gxg-button\n                    disabled={\n                      !this.actionCompleted ||\n                      this.getModuleData(module, \"action\") === \"incompatible\" ||\n                      this.getModuleData(module, \"action\") === \"not-installable\"\n                    }\n                    fit\n                    part=\"module-action\"\n                    onClick={this.moduleActionHandler(module)}\n                  >\n                    {this.getActionFromCurrentModuleVersion()}\n                  </gxg-button>\n                </div>\n              ) : null}\n            </ch-tabular-grid-cell>\n          </ch-tabular-grid-row>\n        ))}\n      </ch-tabular-grid>\n    );\n  };\n\n  private renderEmptyStateModules = () => {\n    return (\n      <gx-ide-empty-state\n        stateIconSrc={this.#filterIcon}\n        stateTitle={this._componentLocale.modules.noModulesFilter}\n      ></gx-ide-empty-state>\n    );\n  };\n\n  private moduleVersionIconColor = (module: ModuleData): Color => {\n    const moduleAction = this.getModuleData(module, \"action\");\n    const moduleCurrentVersion = module.currentVersion;\n    if (moduleAction === \"not-installable\" || moduleAction === \"incompatible\") {\n      return \"warning\";\n    } else if (!moduleCurrentVersion) {\n      return \"mercury-primary-disabled\";\n    } else {\n      return \"mercury-primary\";\n    }\n  };\n\n  /* module details/information renders*/\n  private renderVersionName = () => {\n    return (\n      <gxg-title part=\"module-info__name\" type=\"title-05\">\n        <div class=\"module-info__name\">\n          {/* <gxg-icon\n            type=\"objects/module\"\n            color={this.moduleVersionIconColor(this.selectedModule)}\n          ></gxg-icon> */}\n          {this.getModuleData(this.selectedModule, \"name\")}\n        </div>\n      </gxg-title>\n    );\n  };\n\n  private renderVersionWarningMessage = () => {\n    const warningMessage = this.getModuleData(\n      this.selectedModule,\n      \"warningMessage\"\n    );\n    if (warningMessage) {\n      return <p class=\"module-info__alert-message\">{warningMessage}</p>;\n    }\n  };\n\n  private renderInstalledVersion = () => {\n    const currentVersion = this.selectedModule.currentVersion;\n    let caption;\n    let cssClass = \"module-info__action-container\";\n    if (currentVersion) {\n      caption = `${this._componentLocale.modulesInformation.moduleProperties.installed}: ${currentVersion}`;\n      cssClass += ` module-info__action-container--installed`;\n    } else {\n      caption =\n        this._componentLocale.modulesInformation.moduleProperties.notInstalled;\n    }\n    return (\n      <div class={cssClass}>\n        <gxg-text part=\"module-info__action\">{caption}</gxg-text>\n      </div>\n    );\n  };\n\n  private moduleVersionsValueChangedHandler = (e: CustomEvent<any>) => {\n    const versionId = e.detail;\n    this.updateSelectedModuleVersion(versionId);\n  };\n  private moduleVersionsItemChangedHandler = (e: CustomEvent<any>) => {\n    const versionId = e.detail.value;\n    this.updateSelectedModuleVersion(versionId);\n  };\n  private updateSelectedModuleVersion = (versionId: string) => {\n    if (versionId) {\n      this.modulesSelectedVersion.set(this.selectedModule.id, versionId);\n      this.reRenderCounter++;\n    }\n  };\n\n  private renderModuleVersions = () => {\n    return (\n      <div part=\"available-versions\">\n        <gxg-combo-box\n          id=\"versions-combo-box\"\n          disable-filter\n          value={this.getModuleData(this.selectedModule, \"id\")}\n          part=\"module-versions\"\n          display-validation-styles\n          display-validation-message\n          label={\n            this._componentLocale.modulesInformation.moduleProperties\n              .availableVersions\n          }\n          labelPosition=\"start\"\n          centerLabel\n          onValueChanged={this.moduleVersionsValueChangedHandler}\n          disabled={this.loadingServer}\n        >\n          {this.selectedModule.versions.map(item => (\n            <gxg-combo-box-item\n              value={item.id}\n              onItemSelected={this.moduleVersionsItemChangedHandler}\n            >\n              {item.id}\n            </gxg-combo-box-item>\n          ))}\n        </gxg-combo-box>\n      </div>\n    );\n  };\n\n  private selectedButtonChangedHandler = (e: CustomEvent<string>) => {\n    const type = e.detail.replace(\"btn-\", \"\") as ModuleFilterType;\n    this.filterModulesByType(type);\n  };\n\n  private serverItemSelectedHandler = (\n    e: CustomEvent<{\n      el: HTMLGxgComboBoxItemElement;\n      index: number;\n      value: any;\n      icon?: string;\n    }>\n  ) => {\n    const serverId = e.detail.value;\n    this.serverSelectedCallbackHandler(serverId, false);\n  };\n\n  private serverValueChangedHandler = (e: CustomEvent<any>) => {\n    const serverId = e.detail;\n    this.serverSelectedCallbackHandler(serverId, false);\n  };\n\n  private progressBarCloseHandler = () => {\n    setTimeout(() => {\n      this.actionCompleted = true;\n      this.closeProgressBar = true;\n      // reset\n      this.progressValue = 0;\n      this.progressState = \"in-progress\";\n    }, 400);\n    // delay to force the footer line disappear after the top-state-bar has been closed.\n  };\n\n  private reloadServer = () => {\n    this.serverSelectedCallbackHandler(this.selectedServerId, true);\n  };\n\n  // 11.RENDER() FUNCTION //\n\n  render(): void {\n    return (\n      <Host\n        class={{\n          \"gx-ide-component\": true\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noAboveFooterPadding\n            noBorderAboveFooter={this.closeProgressBar}\n            part=\"servers\"\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n          >\n            {/* Servers*/}\n            <main class=\"main\">\n              <div class=\"modules__container\">\n                <header class=\"modules__header\">\n                  <div class=\"modules__combo-container\">\n                    <gxg-label>\n                      {this._componentLocale.modules.selectServer}\n                    </gxg-label>\n                    <div class=\"modules__combo\">\n                      <gxg-combo-box\n                        disableFilter\n                        onValueChanged={this.serverValueChangedHandler}\n                      >\n                        {this.servers.map(item => (\n                          <gxg-combo-box-item\n                            value={item.id}\n                            onItemSelected={this.serverItemSelectedHandler}\n                          >\n                            {item.name}\n                          </gxg-combo-box-item>\n                        ))}\n                      </gxg-combo-box>\n                      {this.showServerCommands ? (\n                        <span class=\"modules__server-commands\">\n                          <gxg-button\n                            type=\"secondary-icon-only\"\n                            icon=\"gemini-tools/show-more-horizontal\"\n                            onClick={this.showModuleMenu}\n                          ></gxg-button>\n                        </span>\n                      ) : null}\n                      <gxg-button\n                        type=\"secondary-icon-only\"\n                        icon=\"gemini-tools/reset\"\n                        onClick={this.reloadServer}\n                      ></gxg-button>\n                    </div>\n                  </div>\n                </header>\n\n                <div class=\"modules__main\">\n                  <div class=\"modules__main-header\">\n                    <gxg-form-text\n                      label={this._componentLocale.modules.searchModules}\n                      labelPosition=\"above\"\n                      centerLabel={false}\n                      onValueChanged={this.handleFilterChangeHandler}\n                      disabled={this.loadingServer}\n                    ></gxg-form-text>\n                    <gxg-buttons-container\n                      reduced\n                      fullWidth\n                      class=\"modules__browser\"\n                      onSelectedButtonChanged={\n                        this.selectedButtonChangedHandler\n                      }\n                    >\n                      <gxg-button\n                        id=\"btn-browse\"\n                        selected\n                        disabled={this.loadingServer}\n                      >\n                        {this._componentLocale.modules.buttonsContainer.browse}\n                      </gxg-button>\n                      <gxg-button\n                        id=\"btn-installed\"\n                        disabled={this.loadingServer}\n                      >\n                        {\n                          this._componentLocale.modules.buttonsContainer\n                            .installed\n                        }\n                      </gxg-button>\n                      <gxg-button\n                        id=\"btn-updates\"\n                        disabled={this.loadingServer}\n                      >\n                        {this._componentLocale.modules.buttonsContainer.updates}\n                      </gxg-button>\n                    </gxg-buttons-container>\n                  </div>\n                  {/* modules grid*/}\n                  <div\n                    class=\"grid-container\"\n                    ref={el => (this.serversDetail = el as HTMLDivElement)}\n                  >\n                    {this.filteredModules.length > 0\n                      ? this.renderModulesGrid()\n                      : this.renderEmptyStateModules()}\n                  </div>\n                </div>\n              </div>\n\n              {/* Module version information*/}\n              {this.selectedModule ? (\n                <div class=\"module-info\">\n                  <header class=\"module-info__header\">\n                    {this.renderVersionName()}\n                    {this.renderInstalledVersion()}\n                    {this.renderModuleVersions()}\n                    {/* {this.renderNotInstallable()} */}\n                    {this.renderVersionWarningMessage()}\n                  </header>\n                  <div class=\"module-info__properties gxg-scrollbar\">\n                    {renderModuleDataProperties(\n                      this.getModuleData(\n                        this.selectedModule,\n                        \"properties\"\n                      ) as ModulePropertyData[]\n                    )}\n                  </div>\n                </div>\n              ) : (\n                <gx-ide-empty-state\n                  class=\"recent-objects__empty-state\"\n                  stateIconSrc={this.#moduleIcon}\n                  stateTitle={\n                    this._componentLocale.modulesInformation.emptyState.title\n                  }\n                  stateDescription={\n                    this._componentLocale.modulesInformation.emptyState\n                      .description\n                  }\n                ></gx-ide-empty-state>\n              )}\n            </main>\n            {/* Top State Bar*/}\n            <gxg-top-state-bar\n              slot=\"footer-above\"\n              part=\"progress-bar\"\n              stateType={this.progressState}\n              noBorder\n              caption={\n                this.selectedModuleAction.message ||\n                this._componentLocale.progressBar.defaultCaption\n              }\n              progress={this.progressValue}\n              active={!this.actionCompleted || !this.closeProgressBar}\n              closeType=\"not-progress\"\n              closedCallback={this.progressBarCloseHandler}\n            ></gxg-top-state-bar>\n          </gx-ide-container>\n        </div>\n        <gxg-ide-loader\n          loaderTitle={this._componentLocale.servers.loading}\n          ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n          container={this.serversDetail}\n          borderRadius=\"0 0 0 8px\"\n        ></gxg-ide-loader>\n      </Host>\n    );\n  }\n}\n\nexport type ExecuteActionCallback = (\n  serverId: string,\n  moduleId: string,\n  moduleVersionId: string,\n  action: ModuleActionType,\n  onProgress: (\n    message: string,\n    progress: number,\n    state: topStateBarType\n  ) => void\n) => Promise<boolean>;\n\nexport type ServerSelectedCallback = (\n  id: string,\n  reload: boolean\n) => Promise<ModuleData[]>;\n\nexport type AddServerCallback = () => Promise<void>;\n\nexport type ServerContextMenuCallback = (\n  contextMenuInfo: ContextMenuInfo\n) => Promise<void>;\nexport interface ActionInfo {\n  message: string;\n  progress: number;\n  state: topStateBarType;\n}\n"],"mappings":"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"}
+{"version":3,"names":["manageModuleReferencesCss","CSS_BUNDLES","GxManageModuleReferences","this","renderedFirstTime","_GxManageModuleReferences_filterIcon","set","getIconPath","category","name","colorType","_GxManageModuleReferences_moduleIcon","updateModulesSelectedVersion","modulesAll","selectedServerId","selectedServerIdOnModulesAllUpdate","modulesSelectedVersion","clear","forEach","module","id","versions","length","newModule","get","undefined","getActionFromCurrentModuleVersion","action","getModuleData","selectedModule","onProgress","message","progress","state","data","selectedModuleAction","Object","assign","progressValue","progressState","handleModuleChange","event","selectedModuleId","detail","rowsId","foundModule","find","item","serverSelectedCallbackHandler","async","reload","serverSelectedCallback","loadingServer","resolvedObjects","filterModulesByType","filteredModules","handleFilterChange","value","trim","toLowerCase","filter","selectedVersionName","includes","handleFilterChangeHandler","e","executeActionCallbackHandler","executeActionCallback","moduleSelectedVersionId","actionCompleted","type","currentVersion","version","showModuleMenu","serverContextMenuCallback","buttonBoundingClientRect","target","getBoundingClientRect","selection","clientX","x","clientY","y","dataType","selectedVersionId","selectedVersion","selectedVersionData","moduleActionHandler","closeProgressBar","renderModulesGrid","h","rowSelectionMode","part","class","onSelectionChanged","settingable","size","map","rowid","key","selected","moduleVersionIconColor","color","disabled","fit","onClick","renderEmptyStateModules","stateIconSrc","__classPrivateFieldGet","stateTitle","_componentLocale","modules","noModulesFilter","moduleAction","moduleCurrentVersion","renderVersionName","renderVersionWarningMessage","warningMessage","renderInstalledVersion","caption","cssClass","modulesInformation","moduleProperties","installed","notInstalled","moduleVersionsValueChangedHandler","versionId","updateSelectedModuleVersion","moduleVersionsItemChangedHandler","reRenderCounter","renderModuleVersions","label","availableVersions","labelPosition","centerLabel","onValueChanged","onItemSelected","selectedButtonChangedHandler","replace","serverItemSelectedHandler","serverId","serverValueChangedHandler","progressBarCloseHandler","setTimeout","reloadServer","Map","modulesAllWatcher","loadingServerHandler","loading","loaderEl","show","componentDidRender","componentDidRenderFirstTime","emit","componentName","componentWillLoad","Locale","getComponentStrings","el","componentDidLoad","servers","onPropValueChange","newModulesData","validate","render","Host","model","noContentPadding","noAboveFooterPadding","noBorderAboveFooter","containerTitle","displayTitle","selectServer","disableFilter","showServerCommands","icon","searchModules","reduced","fullWidth","onSelectedButtonChanged","buttonsContainer","browse","updates","ref","serversDetail","renderModuleDataProperties","emptyState","title","stateDescription","description","slot","stateType","noBorder","progressBar","defaultCaption","active","closeType","closedCallback","loaderTitle","container","borderRadius"],"sources":["src/components/modules/manage-module-references/manage-module-references.scss?tag=gx-ide-manage-module-references&encapsulation=shadow","src/components/modules/manage-module-references/manage-module-references.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n\n/*--- General ---*/\np,\nul {\n  font-size: var(--font-size-lg);\n  margin: 0;\n}\np {\n  line-height: 1.6em;\n}\n/*--- Header ---*/\n.header {\n  align-items: center;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: 1fr;\n}\n.main {\n  display: grid;\n  //grid-template-columns: 1fr 2fr 1fr;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: 1fr;\n  height: 100%;\n  overflow: auto;\n}\nch-grid-columnset {\n  display: none;\n}\nch-grid-row[selected] {\n  gxg-icon[data-action=\"install\"] {\n    //WA to improve visibility\n    filter: brightness(2);\n  }\n}\n.grid-cell-module {\n  &__info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--mer-spacing--3xs);\n  }\n  &__name {\n    font-weight: var(--mer-font__weight--bold);\n  }\n  &__name,\n  &__description {\n    line-height: 1.55em;\n  }\n}\n\n/*--- Servers Container ---*/\n.grid-container {\n  height: 100%;\n  overflow: auto;\n  gx-ide-empty-state {\n    height: 100%;\n  }\n}\n.servers-container {\n  display: none;\n  height: 100%;\n  &__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--gxg-list-box-main__padding) var(--gxg-list-box-main__padding)\n      0 var(--gxg-list-box-main__padding);\n\n    gxg-button {\n      width: 100%;\n    }\n  }\n}\n\n/*--- Modules (Header) ---*/\n.modules {\n  &__header {\n    padding: var(--gxg-list-box-main__padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n  }\n  &__combo-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n  }\n  &__server-commands {\n    display: flex;\n    gap: var(--mer-spacing--xs);\n  }\n  &__combo {\n    gxg-combo-box {\n      flex: 1;\n    }\n    display: flex;\n    flex-direction: row;\n    gap: var(--mer-spacing--xs);\n  }\n  &__container {\n    border-inline-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n    display: grid;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    overflow: auto;\n  }\n  &__main {\n    display: grid;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    overflow: auto;\n\n    &-header {\n      display: flex;\n      padding: var(--mer-spacing--xs);\n      flex-direction: column;\n      gap: var(--mer-spacing--xs);\n    }\n  }\n}\n\n/*--- Module Info ---*/\n.module-info {\n  display: grid;\n  grid-template-rows: auto 1fr;\n  height: 100%;\n  overflow: auto;\n\n  &__title {\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n  }\n\n  &__name {\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--sm);\n    --ds-icon-size-box--regular: 24px;\n    --ds-icon-size--regular: 24px;\n    font-weight: var(--mer-font__weight--bold);\n  }\n\n  &__header {\n    padding: var(--gx-ide-container__padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    border-block-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n  }\n\n  &__action-container {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n    &:before {\n      content: \"\";\n      width: var(--mer-spacing--xs);\n      height: var(--mer-spacing--xs);\n      border-radius: 50%;\n      display: block;\n      background-color: var(--mer-icon__primary--disabled);\n    }\n    &--installed:before {\n      background-color: var(--mer-icon__primary);\n    }\n    &--uninstallable:before {\n      background-color: var(--mer-icon__warning);\n    }\n  }\n\n  &__warning-message {\n    margin-block-start: var(--mer-spacing--2xs);\n    background-color: var(--mer-color__tinted-yellow--5);\n    color: var(--mer-text__on-elevation);\n    border: var(--mer-border__width--sm) solid var(--mer-border-color__warning);\n    border-radius: var(--mer-border__radius--sm);\n    padding: var(--mer-spacing--xs) var(--mer-spacing--md);\n  }\n\n  &__divider {\n    width: calc(100% - var(--gx-ide-container__padding) * 4);\n    padding: 0 var(--gx-ide-container__padding);\n    margin: 0 auto;\n    border: 0;\n    border-block-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n  }\n  &__properties {\n    display: flex;\n    flex-direction: column;\n    padding: var(--gx-ide-container__padding);\n    gap: var(--mer-spacing--xs);\n    overflow: auto;\n  }\n}\n\n.md-property {\n  display: grid;\n  gap: var(--mer-spacing--xs);\n\n  &--inline {\n    grid-template-columns: auto 1fr;\n  }\n  &--block {\n  }\n  &__key {\n    font-weight: var(--font-weight-bold);\n    max-width: 150px;\n  }\n  &__value {\n    font-size: var(--mer-font__size--2xs);\n  }\n  &__key,\n  &__value {\n    > * {\n      display: inline-block;\n    }\n  }\n  &__list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    > ul {\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      display: flex;\n      flex-direction: column;\n      gap: var(--mer-spacing--2xs);\n      margin-inline-start: var(--mer-spacing--xs);\n\n      li {\n        position: relative;\n        padding-inline-start: 12px;\n        line-height: var(--ds-base-font-line-height--comfortable);\n        &::before {\n          content: \"\";\n          position: absolute;\n          left: 0;\n          top: 7px;\n          display: inline-block;\n          width: var(--mer-spacing--2xs);\n          height: var(--mer-spacing--2xs);\n          background-color: var(--mer-text__on-surface);\n        }\n      }\n    }\n  }\n}\n\n.md-property,\n.md-property__list {\n  border-block-end: var(--mer-border__width--sm) solid\n    var(--gx-ide-container-border-color);\n  padding-block-end: var(--mer-spacing--xs);\n\n  &:last-child {\n    border-block-end: 0;\n    padding-block-end: 0;\n  }\n}\n\ngxg-ide-loader {\n  border-radius: var(--mer-border__radius--md);\n}\n\n.button-wrapper {\n  display: grid;\n  align-items: center;\n  justify-content: center;\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  State,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color } from \"@genexus/gemini\";\nimport { topStateBarType } from \"@genexus/gemini\";\nimport { TabularGridSelectionChangedEvent } from \"@genexus/chameleon-controls-library\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport {\n  ModuleServerData,\n  ModuleData,\n  ModuleActionType,\n  ModuleFilterType,\n  ModulePropertyData,\n  ModuleVersionData\n} from \"../types\";\nimport { renderModuleDataProperties } from \"../../../common/common\";\nimport { Locale } from \"../../../common/locale\";\nimport { ContextMenuInfo } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  // \"utils/form\",\n  // \"utils/layout\",\n  // \"utils/typography\",\n  // \"components/button\",\n  // \"components/checkbox\",\n  // \"components/edit\",\n  \"components/tabular-grid\"\n];\n\n@Component({\n  tag: \"gx-ide-manage-module-references\",\n  styleUrl: \"manage-module-references.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/manage-module-references\"]\n})\nexport class GxManageModuleReferences {\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  /* selectedServerIdOnModulesAllUpdate is updated every time modulesAll is modified, in order to determine if the server is the same or not.*/\n  private selectedServerIdOnModulesAllUpdate: string;\n\n  #filterIcon = getIconPath({\n    category: \"system\",\n    name: \"filters\",\n    colorType: \"on-elevation\"\n  });\n  #moduleIcon = getIconPath({\n    category: \"objects\",\n    name: \"module\"\n  });\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeManageModuleReferencesElement;\n  private loaderEl!: HTMLGxgIdeLoaderElement;\n  private serversDetail!: HTMLDivElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() modulesAll: ModuleData[] = [];\n  @Watch(\"modulesAll\")\n  modulesAllWatcher(modulesAll: ModuleData[]) {\n    this.updateModulesSelectedVersion(modulesAll);\n  }\n  @State() filteredModules: ModuleData[] = [];\n  @State() selectedModule: ModuleData;\n  @State() selectedServerId: string;\n  @State() selectedModuleAction: ActionInfo = {\n    message: \"\",\n    progress: 0,\n    state: \"in-progress\"\n  };\n  @State() modulesSelectedVersion: Map<string, string> = new Map();\n  @State() actionCompleted = true;\n  @State() closeProgressBar = true;\n  @State() progressValue: number = 0;\n  @State() progressState: topStateBarType = \"in-progress\";\n  @State() loadingServer = false;\n  @State() reRenderCounter: number = 0;\n  @Watch(\"loadingServer\")\n  loadingServerHandler(loading: boolean) {\n    if (loading) {\n      this.loaderEl.show = true;\n    } else {\n      this.loaderEl.show = false;\n    }\n  }\n\n  // 4.PUBLIC PROPERTY API //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * List of module servers currently cataloged\n   */\n  @Prop() readonly servers: ModuleServerData[] = [];\n\n  /**\n   * Callback invoked when a server is selected. Returns the set of modules available on that server.\n   */\n  @Prop() readonly serverSelectedCallback: ServerSelectedCallback;\n\n  /**\n   * Callback invoked when the user wants to execute the action corresponding to a selected module. When the action begins to be executed, the component must be able to show the progress of the action. For this, the onProgress parameter is available, which is in turn a callback used by the host to notify the progress by text message and percentage.\n   */\n  @Prop() readonly executeActionCallback: ExecuteActionCallback;\n\n  /**\n   * Callback invoked when Add button is clicked\n   */\n  @Prop() readonly addServerCallback: AddServerCallback;\n\n  /**\n   * Callback invoked when an element is right clicked on servers list\n   */\n  @Prop() readonly serverContextMenuCallback: ServerContextMenuCallback;\n\n  /**\n   * Allows you to hide the button (...) that executes serverContextMenuCallback, if we do not implement the commands in a first version\n   */\n  @Prop() readonly showServerCommands: boolean = false;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  async componentDidLoad() {\n    await this.serverSelectedCallbackHandler(this.servers[0].id, false);\n  }\n\n  // 7.LISTENERS //\n\n  @Watch(\"modulesAll\")\n  onPropValueChange(newModulesData: ModuleData[]) {\n    this.filteredModules = [...newModulesData];\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  /**\n   * validate\n   */\n  @Method()\n  async validate(): Promise<boolean> {\n    return true;\n  }\n\n  // 9.LOCAL METHODS //\n\n  private updateModulesSelectedVersion = (modulesAll: ModuleData[]) => {\n    if (this.selectedServerId !== this.selectedServerIdOnModulesAllUpdate) {\n      // the server has changed. clear the updateModulesSelectedVersion\n      this.modulesSelectedVersion.clear();\n      modulesAll.forEach(module => {\n        // this.modulesSelectedVersion.set(module.id, module.versions[0].id);\n        this.modulesSelectedVersion.set(\n          module.id,\n          module.versions[module.versions.length - 1].id\n        );\n      });\n    } else {\n      // the server has't changed. only add the module to the map, if it is a new module.\n      modulesAll.forEach(module => {\n        const newModule =\n          this.modulesSelectedVersion.get(module.id) === undefined;\n        if (newModule) {\n          this.modulesSelectedVersion.set(module.id, module.versions[0].id);\n        }\n      });\n    }\n    this.selectedServerIdOnModulesAllUpdate = this.selectedServerId;\n  };\n\n  private getActionFromCurrentModuleVersion = (): ModuleActionType => {\n    const action = this.getModuleData(\n      this.selectedModule,\n      \"action\"\n    ) as ModuleActionType;\n    return action || \"install\";\n  };\n\n  /**\n   * Callback invoked to get the progress when module is performing an action\n   */\n  private onProgress = (\n    message: string,\n    progress: number,\n    state: topStateBarType\n  ): void => {\n    const data = { message, progress, state };\n    this.selectedModuleAction = { ...data };\n    this.progressValue = this.selectedModuleAction.progress;\n    this.progressState = this.selectedModuleAction.state;\n  };\n\n  // 10.LOCAL METHODS //\n\n  /**\n   * Used for changing the selected module\n   */\n  private handleModuleChange = (\n    event: CustomEvent<TabularGridSelectionChangedEvent>\n  ) => {\n    const selectedModuleId = event.detail.rowsId[0];\n    const foundModule = this.modulesAll.find(\n      item => item.id === selectedModuleId\n    );\n    if (foundModule) {\n      this.selectedModule = foundModule;\n    }\n  };\n\n  /**\n   * Change the server selected value in response to callbackServerSelected callback\n   */\n  private serverSelectedCallbackHandler = async (id: any, reload: boolean) => {\n    if (this.serverSelectedCallback) {\n      this.loadingServer = true;\n      const resolvedObjects = await this.serverSelectedCallback(id, reload);\n      this.selectedServerId = id;\n      this.modulesAll = [...resolvedObjects];\n      this.filterModulesByType(\"browse\");\n      this.selectedModule = this.filteredModules[0];\n      this.loadingServer = false;\n    }\n  };\n\n  private handleFilterChange = (value: string) => {\n    value = value.trim().toLowerCase();\n    if (value) {\n      this.filteredModules = this.modulesAll.filter(module => {\n        const selectedVersionName = this.getModuleData(\n          module,\n          \"name\"\n        ) as string;\n        return selectedVersionName?.toLowerCase().includes(value);\n      });\n    } else {\n      this.filteredModules = this.modulesAll;\n    }\n  };\n\n  private handleFilterChangeHandler = (e: CustomEvent<string>) => {\n    const value = e.detail;\n    return this.handleFilterChange(value);\n  };\n\n  /**\n   * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback\n   */\n  private executeActionCallbackHandler = async (module: ModuleData) => {\n    if (this.executeActionCallback) {\n      const moduleSelectedVersionId = this.modulesSelectedVersion.get(\n        module.id\n      );\n      const actionCompleted = await this.executeActionCallback(\n        this.selectedServerId,\n        module.id,\n        moduleSelectedVersionId,\n        this.getActionFromCurrentModuleVersion(),\n        this.onProgress\n      );\n      if (actionCompleted) {\n        this.serverSelectedCallbackHandler(this.selectedServerId, false);\n      }\n      this.actionCompleted = actionCompleted;\n    }\n  };\n\n  private filterModulesByType = (type: ModuleFilterType) => {\n    // browse\n    if (type === \"browse\") {\n      this.filteredModules = this.modulesAll;\n    }\n    // installed\n    else if (type === \"installed\") {\n      this.filteredModules = this.modulesAll.filter((module: ModuleData) => {\n        // if the module has a currentVersion (not undefined) it means it is installed\n        return module.currentVersion;\n      });\n    } else if (type === \"updates\") {\n      this.filteredModules = this.modulesAll.filter((module: ModuleData) => {\n        return module.versions.find(version => version.action === \"update\");\n      });\n    }\n  };\n\n  private showModuleMenu = async (e: MouseEvent) => {\n    if (this.serverContextMenuCallback) {\n      const buttonBoundingClientRect = (\n        e.target as HTMLElement\n      ).getBoundingClientRect();\n      await this.serverContextMenuCallback({\n        selection: [this.selectedServerId],\n        clientX: buttonBoundingClientRect.x,\n        clientY: buttonBoundingClientRect.y\n      });\n    }\n  };\n\n  private getModuleData = (\n    module: ModuleData,\n    dataType: keyof ModuleVersionData\n  ): string | ModulePropertyData[] | undefined => {\n    const selectedVersionId = this.modulesSelectedVersion.get(module.id);\n    let selectedVersion;\n    let selectedVersionData;\n    if (selectedVersionId) {\n      selectedVersion = module.versions.find(\n        version => version.id === selectedVersionId\n      );\n    }\n    if (selectedVersion) {\n      selectedVersionData = selectedVersion[dataType];\n    }\n    return selectedVersionData;\n  };\n\n  private moduleActionHandler = (module: ModuleData) => () => {\n    this.actionCompleted = false;\n    this.closeProgressBar = false;\n    this.executeActionCallbackHandler(module);\n  };\n\n  private renderModulesGrid = (): Element => {\n    return (\n      <ch-tabular-grid\n        rowSelectionMode=\"single\"\n        part=\"ch-grid-pending-commits\"\n        class=\"tabular-grid servers-detail no-border\"\n        onSelectionChanged={this.handleModuleChange}\n      >\n        <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            settingable={false}\n            size=\"min-content\"\n          ></ch-tabular-grid-column>\n\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            settingable={false}\n          ></ch-tabular-grid-column>\n          <ch-tabular-grid-column\n            class=\"tabular-grid-column\"\n            settingable={false}\n            size=\"min-content\"\n          ></ch-tabular-grid-column>\n        </ch-tabular-grid-columnset>\n\n        {this.filteredModules.map((module: ModuleData) => (\n          <ch-tabular-grid-row\n            class=\"tabular-grid-row\"\n            rowid={module.id}\n            key={module.id}\n            selected={\n              this.selectedModule && this.selectedModule.id === module.id\n            }\n          >\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              <gxg-icon\n                type=\"objects/module\"\n                data-action={this.moduleVersionIconColor(module)}\n                color={this.moduleVersionIconColor(module)}\n                size=\"small\"\n              ></gxg-icon>\n            </ch-tabular-grid-cell>\n            <ch-tabular-grid-cell class=\"tabular-grid-cell grid-cell-module__info\">\n              <span class=\"grid-cell-module__name\">\n                {this.getModuleData(module, \"name\")}\n              </span>\n              <span class=\"grid-cell-module__description\">\n                {this.getModuleData(module, \"description\")}\n              </span>\n            </ch-tabular-grid-cell>\n\n            <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n              {this.selectedModule && this.selectedModule.id === module.id ? (\n                <div class=\"button-wrapper\">\n                  <gxg-button\n                    disabled={\n                      !this.actionCompleted ||\n                      this.getModuleData(module, \"action\") === \"incompatible\" ||\n                      this.getModuleData(module, \"action\") === \"not-installable\"\n                    }\n                    fit\n                    part=\"module-action\"\n                    onClick={this.moduleActionHandler(module)}\n                  >\n                    {this.getActionFromCurrentModuleVersion()}\n                  </gxg-button>\n                </div>\n              ) : null}\n            </ch-tabular-grid-cell>\n          </ch-tabular-grid-row>\n        ))}\n      </ch-tabular-grid>\n    );\n  };\n\n  private renderEmptyStateModules = () => {\n    return (\n      <gx-ide-empty-state\n        stateIconSrc={this.#filterIcon}\n        stateTitle={this._componentLocale.modules.noModulesFilter}\n      ></gx-ide-empty-state>\n    );\n  };\n\n  private moduleVersionIconColor = (module: ModuleData): Color => {\n    const moduleAction = this.getModuleData(module, \"action\");\n    const moduleCurrentVersion = module.currentVersion;\n    if (moduleAction === \"not-installable\" || moduleAction === \"incompatible\") {\n      return \"warning\";\n    } else if (!moduleCurrentVersion) {\n      return \"mercury-primary-disabled\";\n    } else {\n      return \"mercury-primary\";\n    }\n  };\n\n  /* module details/information renders*/\n  private renderVersionName = () => {\n    return (\n      <gxg-title part=\"module-info__name\" type=\"title-05\">\n        <div class=\"module-info__name\">\n          {/* <gxg-icon\n            type=\"objects/module\"\n            color={this.moduleVersionIconColor(this.selectedModule)}\n          ></gxg-icon> */}\n          {this.getModuleData(this.selectedModule, \"name\")}\n        </div>\n      </gxg-title>\n    );\n  };\n\n  private renderVersionWarningMessage = () => {\n    const warningMessage = this.getModuleData(\n      this.selectedModule,\n      \"warningMessage\"\n    );\n    if (warningMessage) {\n      return <p class=\"module-info__alert-message\">{warningMessage}</p>;\n    }\n  };\n\n  private renderInstalledVersion = () => {\n    const currentVersion = this.selectedModule.currentVersion;\n    let caption;\n    let cssClass = \"module-info__action-container\";\n    if (currentVersion) {\n      caption = `${this._componentLocale.modulesInformation.moduleProperties.installed}: ${currentVersion}`;\n      cssClass += ` module-info__action-container--installed`;\n    } else {\n      caption =\n        this._componentLocale.modulesInformation.moduleProperties.notInstalled;\n    }\n    return (\n      <div class={cssClass}>\n        <gxg-text part=\"module-info__action\">{caption}</gxg-text>\n      </div>\n    );\n  };\n\n  private moduleVersionsValueChangedHandler = (e: CustomEvent<any>) => {\n    const versionId = e.detail;\n    this.updateSelectedModuleVersion(versionId);\n  };\n  private moduleVersionsItemChangedHandler = (e: CustomEvent<any>) => {\n    const versionId = e.detail.value;\n    this.updateSelectedModuleVersion(versionId);\n  };\n  private updateSelectedModuleVersion = (versionId: string) => {\n    if (versionId) {\n      this.modulesSelectedVersion.set(this.selectedModule.id, versionId);\n      this.reRenderCounter++;\n    }\n  };\n\n  private renderModuleVersions = () => {\n    return (\n      <div part=\"available-versions\">\n        <gxg-combo-box\n          id=\"versions-combo-box\"\n          disable-filter\n          value={this.getModuleData(this.selectedModule, \"id\")}\n          part=\"module-versions\"\n          display-validation-styles\n          display-validation-message\n          label={\n            this._componentLocale.modulesInformation.moduleProperties\n              .availableVersions\n          }\n          labelPosition=\"start\"\n          centerLabel\n          onValueChanged={this.moduleVersionsValueChangedHandler}\n          disabled={this.loadingServer}\n        >\n          {this.selectedModule.versions.map(item => (\n            <gxg-combo-box-item\n              value={item.id}\n              onItemSelected={this.moduleVersionsItemChangedHandler}\n            >\n              {item.id}\n            </gxg-combo-box-item>\n          ))}\n        </gxg-combo-box>\n      </div>\n    );\n  };\n\n  private selectedButtonChangedHandler = (e: CustomEvent<string>) => {\n    const type = e.detail.replace(\"btn-\", \"\") as ModuleFilterType;\n    this.filterModulesByType(type);\n  };\n\n  private serverItemSelectedHandler = (\n    e: CustomEvent<{\n      el: HTMLGxgComboBoxItemElement;\n      index: number;\n      value: any;\n      icon?: string;\n    }>\n  ) => {\n    const serverId = e.detail.value;\n    this.serverSelectedCallbackHandler(serverId, false);\n  };\n\n  private serverValueChangedHandler = (e: CustomEvent<any>) => {\n    const serverId = e.detail;\n    this.serverSelectedCallbackHandler(serverId, false);\n  };\n\n  private progressBarCloseHandler = () => {\n    setTimeout(() => {\n      this.actionCompleted = true;\n      this.closeProgressBar = true;\n      // reset\n      this.progressValue = 0;\n      this.progressState = \"in-progress\";\n    }, 400);\n    // delay to force the footer line disappear after the top-state-bar has been closed.\n  };\n\n  private reloadServer = () => {\n    this.serverSelectedCallbackHandler(this.selectedServerId, true);\n  };\n\n  // 11.RENDER() FUNCTION //\n\n  render(): void {\n    return (\n      <Host\n        class={{\n          \"gx-ide-component\": true\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noAboveFooterPadding\n            noBorderAboveFooter={this.closeProgressBar}\n            part=\"servers\"\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n          >\n            {/* Servers*/}\n            <main class=\"main\">\n              <div class=\"modules__container\">\n                <header class=\"modules__header\">\n                  <div class=\"modules__combo-container\">\n                    <gxg-label>\n                      {this._componentLocale.modules.selectServer}\n                    </gxg-label>\n                    <div class=\"modules__combo\">\n                      <gxg-combo-box\n                        disableFilter\n                        onValueChanged={this.serverValueChangedHandler}\n                      >\n                        {this.servers.map(item => (\n                          <gxg-combo-box-item\n                            value={item.id}\n                            onItemSelected={this.serverItemSelectedHandler}\n                          >\n                            {item.name}\n                          </gxg-combo-box-item>\n                        ))}\n                      </gxg-combo-box>\n                      {this.showServerCommands ? (\n                        <span class=\"modules__server-commands\">\n                          <gxg-button\n                            type=\"secondary-icon-only\"\n                            icon=\"gemini-tools/show-more-horizontal\"\n                            onClick={this.showModuleMenu}\n                          ></gxg-button>\n                        </span>\n                      ) : null}\n                      <gxg-button\n                        type=\"secondary-icon-only\"\n                        icon=\"gemini-tools/reset\"\n                        onClick={this.reloadServer}\n                      ></gxg-button>\n                    </div>\n                  </div>\n                </header>\n\n                <div class=\"modules__main\">\n                  <div class=\"modules__main-header\">\n                    <gxg-form-text\n                      label={this._componentLocale.modules.searchModules}\n                      labelPosition=\"above\"\n                      centerLabel={false}\n                      onValueChanged={this.handleFilterChangeHandler}\n                      disabled={this.loadingServer}\n                    ></gxg-form-text>\n                    <gxg-buttons-container\n                      reduced\n                      fullWidth\n                      class=\"modules__browser\"\n                      onSelectedButtonChanged={\n                        this.selectedButtonChangedHandler\n                      }\n                    >\n                      <gxg-button\n                        id=\"btn-browse\"\n                        selected\n                        disabled={this.loadingServer}\n                      >\n                        {this._componentLocale.modules.buttonsContainer.browse}\n                      </gxg-button>\n                      <gxg-button\n                        id=\"btn-installed\"\n                        disabled={this.loadingServer}\n                      >\n                        {\n                          this._componentLocale.modules.buttonsContainer\n                            .installed\n                        }\n                      </gxg-button>\n                      <gxg-button\n                        id=\"btn-updates\"\n                        disabled={this.loadingServer}\n                      >\n                        {this._componentLocale.modules.buttonsContainer.updates}\n                      </gxg-button>\n                    </gxg-buttons-container>\n                  </div>\n                  {/* modules grid*/}\n                  <div\n                    class=\"grid-container\"\n                    ref={el => (this.serversDetail = el as HTMLDivElement)}\n                  >\n                    {this.filteredModules.length > 0\n                      ? this.renderModulesGrid()\n                      : this.renderEmptyStateModules()}\n                  </div>\n                </div>\n              </div>\n\n              {/* Module version information*/}\n              {this.selectedModule ? (\n                <div class=\"module-info\">\n                  <header class=\"module-info__header\">\n                    {this.renderVersionName()}\n                    {this.renderInstalledVersion()}\n                    {this.renderModuleVersions()}\n                    {/* {this.renderNotInstallable()} */}\n                    {this.renderVersionWarningMessage()}\n                  </header>\n                  <div class=\"module-info__properties gxg-scrollbar\">\n                    {renderModuleDataProperties(\n                      this.getModuleData(\n                        this.selectedModule,\n                        \"properties\"\n                      ) as ModulePropertyData[]\n                    )}\n                  </div>\n                </div>\n              ) : (\n                <gx-ide-empty-state\n                  class=\"recent-objects__empty-state\"\n                  stateIconSrc={this.#moduleIcon}\n                  stateTitle={\n                    this._componentLocale.modulesInformation.emptyState.title\n                  }\n                  stateDescription={\n                    this._componentLocale.modulesInformation.emptyState\n                      .description\n                  }\n                ></gx-ide-empty-state>\n              )}\n            </main>\n            {/* Top State Bar*/}\n            <gxg-top-state-bar\n              slot=\"footer-above\"\n              part=\"progress-bar\"\n              stateType={this.progressState}\n              noBorder\n              caption={\n                this.selectedModuleAction.message ||\n                this._componentLocale.progressBar.defaultCaption\n              }\n              progress={this.progressValue}\n              active={!this.actionCompleted || !this.closeProgressBar}\n              closeType=\"not-progress\"\n              closedCallback={this.progressBarCloseHandler}\n            ></gxg-top-state-bar>\n          </gx-ide-container>\n        </div>\n        <gxg-ide-loader\n          loaderTitle={this._componentLocale.servers.loading}\n          ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n          container={this.serversDetail}\n          borderRadius=\"0 0 0 8px\"\n        ></gxg-ide-loader>\n      </Host>\n    );\n  }\n}\n\nexport type ExecuteActionCallback = (\n  serverId: string,\n  moduleId: string,\n  moduleVersionId: string,\n  action: ModuleActionType,\n  onProgress: (\n    message: string,\n    progress: number,\n    state: topStateBarType\n  ) => void\n) => Promise<boolean>;\n\nexport type ServerSelectedCallback = (\n  id: string,\n  reload: boolean\n) => Promise<ModuleData[]>;\n\nexport type AddServerCallback = () => Promise<void>;\n\nexport type ServerContextMenuCallback = (\n  contextMenuInfo: ContextMenuInfo\n) => Promise<void>;\nexport interface ActionInfo {\n  message: string;\n  progress: number;\n  state: topStateBarType;\n}\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-410a35da.entry.js → p-8925fc99.entry.js}

@@ -1,6 +1,14 @@
-import { g as e, r as t, h as s, H as i, a as r } from "./p-97107ecc.js";
+import { g as e, r as t, h as i, H as s, a as r } from "./p-97107ecc.js";
 
-import { g as o } from "./p-401bfc97.js";
+import { g as o } from "./p-d42e842b.js";
+
+import "./p-d4ecd3bb.js";
+
+import "lit";
+
+import "lit/directives/when.js";
+
+import "lit/directives/if-defined.js";
 
 import { L as a } from "./p-311eedf3.js";
 
@@ -8,17 +16,17 @@ import { A as n } from "./p-8c2e9df4.js";
 
 const l = ":host{--wrapper-copacity:0;--wrapper-min-inline-size:700px;--wrapper-max-inline-size:1040px;--wrapper-block-size:640px;transition:var(--mer-timing--regular) opacity;display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;padding:16px;overflow:auto}.wrapper{flex:1;display:grid;grid-template-columns:1fr var(--wrapper-block-size);block-size:var(--wrapper-block-size);max-inline-size:var(--wrapper-max-inline-size);background-color:var(--mer-surface__elevation--01);border-radius:var(--mer-spacing--sm);overflow:auto;transform:translateY(6px)}.side-inline-start{background-size:cover}.side-inline-end{position:relative;display:grid;grid-template-rows:max-content 1fr max-content;padding:64px 80px;transition:1000ms grid-template-rows;overflow:auto}.close-button{position:absolute;inset-inline-end:0;inset-block-start:0}.header{display:grid;gap:var(--mer-spacing--md);margin-block-end:92px}.header__logo__close-button{display:flex;justify-content:space-between}.title{color:var(--mer-text__on-surface);font-size:var(--mer-font__size--xl);font-weight:var(--mer-font__weight--semi-bold);letter-spacing:0.02em}.next-version{color:var(--mer-text__on-surface)}.header__description{color:var(--mer-text__complementary);line-height:1.45 !important}.main{display:flex;flex-direction:column;gap:var(--mer-spacing--sm);overflow:auto}.log__container{--logVisibleLines:6;--logFontSize:12px;--logLineHeight:1.2;--logGap:4px;--logContainerBlockSize:calc(\n    var(--logFontSize) * var(--logLineHeight) * var(--logVisibleLines) +\n      calc(var(--logGap) * (var(--logVisibleLines) - 1))\n  );block-size:var(--logContainerBlockSize);font-family:monospace;color:var(--mer-text__complementary);display:flex;flex-direction:column-reverse;gap:var(--logGap);overflow:hidden}.log__container:hover{overflow:auto}.log__message{opacity:0;transition:var(--mer-timing--regular) opacity;animation:fadeInLogMessage 0.45s ease-out forwards}.log__message--error{color:var(--mer-text__error)}.footer{display:grid;grid-auto-rows:max-content;gap:var(--mer-spacing--sm);margin-block-start:var(--mer-spacing--lg)}.error-message{font-family:monospace;font-size:13px;line-height:1.5;color:var(--mer-text__error);margin-block-start:auto;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden}.status--processing{display:flex;flex-direction:row;align-items:baseline;gap:4px}@keyframes fadeInLogMessage{from{opacity:0}to{opacity:1}}";
 
-var c = undefined && undefined.__classPrivateFieldSet || function(e, t, s, i, r) {
-  if (i === "m") throw new TypeError("Private method is not writable");
-  if (i === "a" && !r) throw new TypeError("Private accessor was defined without a setter");
+var c = undefined && undefined.__classPrivateFieldSet || function(e, t, i, s, r) {
+  if (s === "m") throw new TypeError("Private method is not writable");
+  if (s === "a" && !r) throw new TypeError("Private accessor was defined without a setter");
   if (typeof t === "function" ? e !== t || !r : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return i === "a" ? r.call(e, s) : r ? r.value = s : t.set(e, s), s;
+  return s === "a" ? r.call(e, i) : r ? r.value = i : t.set(e, i), i;
 };
 
-var p = undefined && undefined.__classPrivateFieldGet || function(e, t, s, i) {
-  if (s === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof t === "function" ? e !== t || !i : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return s === "m" ? i : s === "a" ? i.call(e) : i ? i.value : t.get(e);
+var p = undefined && undefined.__classPrivateFieldGet || function(e, t, i, s) {
+  if (i === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof t === "function" ? e !== t || !s : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? s : i === "a" ? s.call(e) : s ? s.value : t.get(e);
 };
 
 var d;
@@ -66,71 +74,71 @@ const u = class {
     if (r) {
       c = `${c} ${p(this, d, "f").warnings.checkTheLog}`;
     }
-    return s(i, null, s("ch-theme", {
+    return i(s, null, i("ch-theme", {
       model: f
-    }), s("div", {
+    }), i("div", {
       class: {
         scrollable: true,
         wrapper: true
       }
-    }, s("div", {
+    }, i("div", {
       class: "side-inline-start",
       style: {
         backgroundImage: `url(${m})`
       },
       role: "img"
-    }), s("section", {
+    }), i("section", {
       class: "side-inline-end scrollable"
-    }, s("header", {
+    }, i("header", {
       class: "header"
-    }, s("img", {
+    }, i("img", {
       src: g,
       alt: p(this, d, "f").illustrationAlternativeText
-    }), s("h2", {
+    }), i("h2", {
       class: "title"
-    }, p(this, d, "f").title), this.appVersion && s("p", {
+    }, p(this, d, "f").title), this.appVersion && i("p", {
       class: "body-regular-m next-version"
-    }, p(this, d, "f").nextVersion, " ", this.appVersion), s("p", {
+    }, p(this, d, "f").nextVersion, " ", this.appVersion), i("p", {
       class: "body-italic-m header__description"
-    }, p(this, d, "f").allRightsReserved), s("p", {
+    }, p(this, d, "f").allRightsReserved), i("p", {
       class: "body-italic-m header__description"
-    }, p(this, d, "f").copyright)), s("main", {
+    }, p(this, d, "f").copyright)), i("main", {
       class: "main"
-    }, a && s("p", {
+    }, a && i("p", {
       class: {
         "body-regular-m": true,
         "status--processing": true
       }
-    }, p(this, d, "f").initializingServices, n("tiny", "on-surface")), s("code", {
+    }, p(this, d, "f").initializingServices, n("tiny", "on-surface")), i("code", {
       class: "log__container scrollable",
       role: "status",
       "aria-live": "polite",
       "aria-busy": this.ariaBusy
-    }, (t = this.messages) === null || t === void 0 ? void 0 : t.reverse().map(((e, t) => s("p", {
+    }, (t = this.messages) === null || t === void 0 ? void 0 : t.reverse().map(((e, t) => i("p", {
       class: {
         "tiny-regular-l": true,
         log__message: true,
         "log__message--error": e.type === "error"
       },
       key: this.messages.length - t
-    }, e.text)))), l && s("p", {
+    }, e.text)))), l && i("p", {
       class: "error-message status--error"
-    }, o && s("span", null, c), o && this.showDockerMissingError && s("span", null, " - "), this.showDockerMissingError && s("span", null, p(this, d, "f").warnings.dockerMissing))), s("footer", {
+    }, o && i("span", null, c), o && this.showDockerMissingError && i("span", null, " - "), this.showDockerMissingError && i("span", null, p(this, d, "f").warnings.dockerMissing))), i("footer", {
       class: "footer"
-    }, s("div", {
+    }, i("div", {
       class: "buttons-spacer"
-    }, this.showDockerMissingError && s("button", {
+    }, this.showDockerMissingError && i("button", {
       key: "download-docker",
       class: "button-secondary button-icon-and-text download-docker-button",
       onClick: this.downloadDockerCallback
-    }, p(this, d, "f").downloadDocker), r && s("button", {
+    }, p(this, d, "f").downloadDocker), r && i("button", {
       key: "open-log",
       class: "button-tertiary button-icon-and-text",
       onClick: this.openLogCallback
-    }, s("ch-image", {
+    }, i("ch-image", {
       class: "icon-md",
       src: h
-    }), p(this, d, "f").openLog), this.quitCallback && this.showQuitButton && s("button", {
+    }), p(this, d, "f").openLog), this.quitCallback && this.showQuitButton && i("button", {
       class: "button-secondary",
       onClick: this.quitCallback
     }, p(this, d, "f").quitGenexus))))));
@@ -148,4 +156,4 @@ d = new WeakMap;
 u.style = l;
 
 export { u as gx_ide_splash };
-//# sourceMappingURL=p-410a35da.entry.js.map
+//# sourceMappingURL=p-8925fc99.entry.js.map