@genexus/genexus-ide-ui 3.2.20 → 3.2.22

package/dist/genexus-ide-ui/p-e82d9621.entry.js.map

@@ -0,0 +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","String","versionId","caption","_GxIdePluginDetails_menuVersionSelectedHandler","event","selectedVersionId","detail","installCallback","Number","undefined","_GxIdePluginDetails_renderUninstallButton","h","class","onClick","__classPrivateFieldGet","_GxIdePluginDetails_uninstallClickedHandler","actions","uninstall","_GxIdePluginDetails_latestVersionId","_b","_GxIdePluginDetails_installClickedHandler","call","_GxIdePluginDetails_openLinkHandler","link","openLinkCallback","preventDefault","uninstallCallback","_GxIdePluginDetails_cancelClickedHandler","cancelCallback","_GxIdePluginDetails_renderInstallProgress","phase","percent","installProgress","downloading","installing","active","progress","stateType","closeType","closedCallback","_GxIdePluginDetails_renderActionButtons","actionButtonCaption","actionButtonClasses","actionButtonCallback","moreVersionsToUpdate","length","installed","install","updateVersion","updateTo","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":["@import \"../../global/temporary-mercury-overrides/_tab.scss\";\n\n: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: var(--spacing-gap-l);\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: var(--spacing-gap-xl);\n  padding-block-start: var(--spacing-padding-xxl);\n  padding-block-end: var(--spacing-padding-xl);\n  padding-inline: var(--spacing-padding-xxl);\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: var(--spacing-gap-m);\n}\n.plugin__publisher {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs);\n}\n.plugin__description {\n  line-height: var(--line-height-spacious); // WA: Text appears too tight.\n}\n.plugin__actions-container {\n  margin-block-start: var(--spacing-padding-m);\n  align-items: center;\n  // Reserve the taller progress-bar height (control + gap + bar) so swapping\n  // the install button for the progress bar doesn't shift the layout.\n  min-block-size: calc(var(--control-block-size) + var(--spacing-gap-xs) + 4px);\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: var(--spacing-gap-m);\n\n  // WA Biggest Mercury icon (icon-s) 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: var(--font-size-body-s);\n}\n.plugin__info-category {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-m);\n\n  &:not(:first-child) {\n    padding-block-start: var(--spacing-padding-xl);\n    margin-block-start: var(--spacing-padding-xl);\n    border-block-start: 1px solid var(--color-border-surface-on-elevation-1);\n  }\n}\n.fields__list:not(.fields__list--as-tags) {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-m);\n  .field__li {\n    display: flex;\n    gap: var(--spacing-gap-xl);\n  }\n}\n.fields__list--as-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-m);\n\n  .field__li {\n    border: 1px solid var(--color-border-surface-on-elevation-1);\n    padding-block: var(--spacing-padding-xxs);\n    padding-inline: var(--spacing-padding-m);\n    border-radius: 4px;\n\n    text-transform: lowercase;\n  }\n  .field__link {\n    color: var(--color-text-neutral-strawberry);\n\n    &:hover {\n      color: var(--color-accent-primary-default);\n    }\n    &:active {\n      color: var(--color-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(--color-accent-primary-default);\n  &:hover {\n    color: var(--color-accent-primary-hover);\n  }\n  &:active {\n    color: var(--color-accent-primary-pressed);\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    (var(--control-block-size) - 2 * var(--control-border-width) - 16px) / 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: stretch;\n  gap: 1px;\n}\n\n.install-progress {\n  flex: 1;\n  min-inline-size: 220px;\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-surface\"\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 the ordinal versionId of the selected version (undefined installs the latest).\n   */\n  @Prop() readonly installCallback!: (versionId?: number) => Promise<void>;\n\n  /**\n   * When set, the component is installing this plugin and shows a determinate progress bar\n   * instead of the action button.\n   */\n  @Prop() readonly installProgress?: PluginInstallProgress;\n\n  /**\n   * Callback that should be invoked when the user cancels an in-progress\n   * install/update from the progress bar.\n   */\n  @Prop() readonly cancelCallback!: () => 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    // Guard: #chMarkdownViewer is unset when there are no docSections.\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        // The menu id carries the ordinal versionId; the caption shows the human-readable version.\n        return { id: String(version.versionId), caption: version.version };\n      }\n    );\n    return versionsToUpdateMenusModel;\n  };\n\n  #menuVersionSelectedHandler = (\n    event: CustomEvent<{\n      id?: string;\n    }>\n  ) => {\n    const selectedVersionId = event.detail.id;\n    this.installCallback(\n      selectedVersionId != null ? Number(selectedVersionId) : undefined\n    );\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  // The latest version is listed first; its ordinal drives install/update from the primary button.\n  #latestVersionId = (): number | undefined =>\n    this.data.versions?.[0]?.versionId;\n\n  #installClickedHandler = () => {\n    this.installCallback(this.#latestVersionId());\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  #cancelClickedHandler = () => {\n    this.cancelCallback();\n  };\n\n  #renderInstallProgress = (): JSX.Element => {\n    const { phase, percent } = this.installProgress;\n    const caption =\n      phase === \"download\"\n        ? this.#componentLocale.actions.downloading\n        : this.#componentLocale.actions.installing;\n\n    return (\n      <gx-ide-progress-bar\n        class=\"install-progress plain\"\n        active\n        caption={`${caption} ${percent}%`}\n        progress={percent}\n        stateType=\"in-progress\"\n        closeType=\"button\"\n        closedCallback={this.#cancelClickedHandler}\n      ></gx-ide-progress-bar>\n    );\n  };\n\n  #renderActionButtons = (): JSX.Element => {\n    // While an install/update is running, replace the buttons with a determinate progress bar.\n    if (this.installProgress) {\n      return this.#renderInstallProgress();\n    }\n\n    let actionButtonCaption;\n    let actionButtonClasses = \"button-primary action-button\";\n    let actionButtonCallback;\n    const moreVersionsToUpdate = this.data.versions?.length > 1;\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 = () =>\n        this.installCallback(this.#latestVersionId());\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-m\"></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-m\"></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 caption-semi-bold-l\",\n                  USER_ICON\n                )\n              ) : (\n                <p class=\"plugin__publisher caption-semi-bold-l\">\n                  <ch-image src={USER_ICON} class=\"icon-s\"></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 src={CHECK_CIRCLE_ICON} class=\"icon-s\"></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 PluginVersionOption = {\n  version: string;\n  versionId: number;\n};\n\nexport type PluginInstallProgress = {\n  phase: \"download\" | \"install\";\n  percent: number;\n};\n\nexport type PluginDetailsData = {\n  id: string;\n  name: string | LinkData;\n  publisher: string | LinkData;\n  installed: boolean;\n  updateVersion?: string;\n  versions: PluginVersionOption[];\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-ef8663dd.entry.js

@@ -0,0 +1,284 @@
+import { g as t, r as e, h as i, H as o, a as s } from "./p-9b9ccd0c.js";
+
+import { g as a } from "./p-d42e842b.js";
+
+import "./p-6534555e.js";
+
+import "lit";
+
+import "lit/directives/when.js";
+
+import "lit/directives/if-defined.js";
+
+import { L as r } from "./p-311eedf3.js";
+
+import { c as n } from "./p-c5196b3b.js";
+
+const c = ":host{display:grid;block-size:100%;position:relative}.outer-container{grid-template-rows:max-content 1fr}.inner-container{position:relative}.list-box::part(item){width:100%;min-width:100%}.list-box::part(item__action){gap:var(--spacing-gap-xs)}.list-box::part(item__caption){font-weight:var(--font-style-semi-bold);color:var(--color-text-neutral-default);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-box::part(item__inline-caption){grid-template-columns:minmax(0, 1fr) max-content;align-items:center;gap:var(--spacing-gap-m);width:100%;min-width:100%}:host .list-box::part(group__action),:host .list-box::part(group__caption){font-size:var(--font-size-body-s);--ch-action-list-group__expandable-button-size:var(--icon-xs);--ch-action-list-group__expandable-button-image-size:var(--icon-xs)}.list-box::part(custom-image){block-size:40px;inline-size:40px;border-radius:var(--border-radius-m);object-fit:cover;margin-inline-end:12px}.list-box::part(custom-meta){display:flex;align-items:center;gap:var(--spacing-gap-m)}.list-box::part(custom-meta-item){display:inline-flex;align-items:center;gap:var(--spacing-gap-xs);font-size:var(--font-size-body-s);color:var(--color-text-neutral-default);white-space:nowrap}.list-box::part(custom-meta-icon){--ch-image-size:14px}.list-box::part(custom-container){display:flex;flex-direction:column;gap:var(--spacing-gap-xs);width:100%}.list-box::part(item__block-end start){width:100%;min-width:100%}.list-box::part(custom-description){font-size:var(--font-size-body-s);margin:0;color:var(--color-text-neutral-neutral);line-height:var(--line-height-relaxed);margin-inline-end:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-box::part(custom-footer){display:flex;align-items:center;gap:var(--spacing-gap-m);width:100%;margin-block-start:2px;min-block-size:var(--control-block-size)}.list-box::part(custom-brand){font-weight:var(--font-style-regular);font-size:var(--font-size-body-s);color:var(--color-text-neutral-disabled);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-box::part(custom-button){--button-color:var(--color-text-primary-default);margin-inline-start:auto;display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;padding-block:var(--control-padding-block);padding-inline:var(--control-padding-inline);box-sizing:border-box;color:var(--button-color);font-size:var(--font-size-body-s);font-weight:var(--font-style-semi-bold);text-transform:capitalize}.list-box::part(custom-button):hover{--button-color:var(--color-text-primary-hover)}.list-box::part(custom-button):active{--button-color:var(--color-text-primary-pressed)}.list-box::part(custom-progress){display:flex;align-items:center;gap:var(--spacing-gap-xs);margin-inline-start:auto;inline-size:140px}.list-box::part(custom-progress-label){font-size:var(--font-size-caption-s);line-height:1;color:var(--color-text-neutral-neutral);white-space:nowrap}.list-box::part(custom-progress-bar){flex:1}";
+
+var l = undefined && undefined.__classPrivateFieldGet || function(t, e, i, o) {
+  if (i === "a" && !o) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? t !== e || !o : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? o : i === "a" ? o.call(t) : o ? o.value : e.get(t);
+};
+
+var p = undefined && undefined.__classPrivateFieldSet || function(t, e, i, o, s) {
+  if (o === "m") throw new TypeError("Private method is not writable");
+  if (o === "a" && !s) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? t !== e || !s : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return o === "a" ? s.call(t, i) : s ? s.value = i : e.set(t, i), i;
+};
+
+var m, d, u, h, g, f, b, x, v, w, y;
+
+const z = a({
+  category: "system",
+  name: "filters",
+  colorType: "on-surface"
+});
+
+// plugin icon if no iconUrl was provided
+const _ = t(`./gx-ide-assets/plugin-explorer/images/plugin-icon.svg`);
+
+const k = [ "resets/box-sizing", "components/list-box", "components/button", "components/edit", "utils/form", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];
+
+const j = a({
+  category: "system",
+  name: "search",
+  colorType: "on-surface"
+});
+
+const M = a({
+  category: "system",
+  name: "star-fill",
+  colorType: "warning"
+});
+
+const T = a({
+  category: "system",
+  name: "download",
+  colorType: "on-surface"
+});
+
+const W = class {
+  constructor(t) {
+    e(this, t);
+    /**
+         * The component hard-coded strings translations.
+         */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        m.set(this, void 0);
+    d.set(this, false);
+    u.set(this, ((t, e) => i => {
+      i.stopPropagation();
+      this.executeActionCallback(t, e);
+    }));
+    // Formats a raw downloads count into a compact string (e.g. 4000 -> "4K").
+        h.set(this, new Intl.NumberFormat(undefined, {
+      notation: "compact",
+      maximumFractionDigits: 1
+    }));
+    g.set(this, (t => {
+      const e = typeof t === "number" ? t : Number(t);
+      return Number.isFinite(e) ? l(this, h, "f").format(e) : `${t}`;
+    }));
+    f.set(this, (t => {
+      const e = !!t.action;
+      const o = t.downloads !== undefined && t.downloads !== null;
+      const s = t.rating !== undefined && t.rating !== null;
+      const a = o || s;
+      const r = {
+        id: t.id,
+        caption: t.name,
+        imgSrc: t.iconUrl,
+        type: "actionable",
+        additionalInformation: {
+          "stretch-start": {
+            center: [ {
+              part: "custom-image",
+              jsx: () => i("img", {
+                part: "custom-image",
+                src: t.iconUrl || _,
+                alt: `${l(this, m, "f").logotype.replace("PLUGIN_NAME_PLACEHOLDER", t.name)}`,
+                loading: "lazy"
+              })
+            } ]
+          },
+          "inline-caption": a && {
+            end: [ {
+              part: "custom-meta",
+              jsx: () => i("div", {
+                part: "custom-meta"
+              }, o && i("span", {
+                part: "custom-meta-item custom-downloads",
+                title: `${t.downloads}`
+              }, i("ch-image", {
+                part: "custom-meta-icon custom-downloads-icon",
+                src: T
+              }), l(this, g, "f").call(this, t.downloads)), s && i("span", {
+                part: "custom-meta-item custom-rating",
+                title: `${t.rating}`
+              }, i("ch-image", {
+                part: "custom-meta-icon custom-rating-icon",
+                src: M
+              }), t.rating))
+            } ]
+          },
+          "block-end": {
+            start: [ {
+              part: "custom-description custom-button custom-container custom-brand custom-footer custom-meta custom-meta-item custom-meta-icon custom-progress custom-progress-label custom-progress-bar item__block-end start",
+              jsx: () => i("div", {
+                part: "custom-container"
+              }, i("p", {
+                part: "custom-description",
+                title: t.description
+              }, t.description), i("div", {
+                part: "custom-footer"
+              }, i("small", {
+                part: "custom-brand"
+              }, t.publisher), t.installProgress ? i("div", {
+                part: "custom-progress"
+              }, i("span", {
+                part: "custom-progress-label"
+              }, t.installProgress.percent, "%"), i("gx-ide-progress-bar", {
+                part: "custom-progress-bar",
+                class: "plain",
+                minimal: true,
+                active: true,
+                stateType: "in-progress",
+                progress: t.installProgress.percent
+              })) : e ? i("button", {
+                class: "button",
+                part: "custom-button",
+                onClick: l(this, u, "f").call(this, t.id, t.action)
+              }, t.action) : null))
+              // {
+              //   slot: "abcd"
+              // } as ActionListItemAdditionalSlot // slot not working
+                        } ]
+          }
+        }
+      };
+      return r;
+    }));
+    // Builds the ch-action-list model from groups: one native action-list group
+    // per PluginGroupData, plus a separator between groups. The group header only
+    // renders a plain-text caption (no custom pill element is supported), so the
+    // per-group total is shown as a number appended to the caption.
+        b.set(this, (t => {
+      const e = [];
+      const i = {
+        type: "separator"
+      };
+      t === null || t === void 0 ? void 0 : t.forEach((t => {
+        var o, s, a;
+        // Skip empty groups so we don't render a header with "(0)".
+                if (!((o = t.plugins) === null || o === void 0 ? void 0 : o.length)) {
+          return;
+        }
+        if (e.length > 0) {
+          e.push(i);
+        }
+        e.push({
+          id: t.id,
+          type: "group",
+          caption: `${t.caption} (${t.plugins.length})`,
+          expandable: (s = t.expandable) !== null && s !== void 0 ? s : true,
+          expanded: (a = t.expanded) !== null && a !== void 0 ? a : true,
+          items: t.plugins.map((t => l(this, f, "f").call(this, t)))
+        });
+      }));
+      return e;
+    }));
+    x.set(this, (async t => {
+      this.loading = true;
+      const e = t.detail;
+      this.plugins = await this.filterCallback(e);
+    }));
+    v.set(this, (() => {
+      const t = this.pluginsActionListModel.length;
+      return t ? i("ch-action-list-render", {
+        model: this.pluginsActionListModel,
+        class: "list-box",
+        selection: "single",
+        onSelectedItemsChange: l(this, y, "f")
+      }) : i("gx-ide-empty-state", {
+        isAnimated: l(this, d, "f"),
+        class: "recent-objects__empty-state",
+        stateIconSrc: z,
+        stateTitle: l(this, m, "f").emptyStateTitle,
+        stateDescription: l(this, m, "f").emptyStateDescription
+      });
+    }));
+    w.set(this, (() => {
+      p(this, d, true, "f");
+      return i("gx-ide-loader", {
+        loaderTitle: l(this, m, "f").loaderTitle,
+        description: l(this, m, "f").loaderDescription,
+        show: true
+      });
+    }));
+    y.set(this, (t => {
+      var e;
+      const i = (e = t.detail[0]) === null || e === void 0 ? void 0 : e.item.type;
+      if (i === "actionable") {
+        const e = t.detail[0].item.id;
+        this.showDetailsCallback(e);
+      }
+    }));
+    this.loading = true;
+    this.pluginsActionListModel = [];
+    this.plugins = undefined;
+    this.filterCallback = undefined;
+    this.showDetailsCallback = undefined;
+    this.executeActionCallback = undefined;
+  }
+  pluginsChangedHandler(t) {
+    this.pluginsActionListModel = l(this, b, "f").call(this, t);
+    this.loading = false;
+  }
+  async componentWillLoad() {
+    p(this, m, await r.getComponentStrings(this.el), "f");
+    this.pluginsChangedHandler(this.plugins);
+  }
+  render() {
+    return i(o, {
+      class: "widget"
+    }, i("ch-theme", {
+      model: k
+    }), i("div", {
+      class: "outer-container field-group"
+    }, i("ch-edit", {
+      id: "search-plugins-input",
+      class: "input",
+      accessibleName: l(this, m, "f").accessibleName,
+      placeholder: l(this, m, "f").searchInputPlaceholder,
+      debounce: n.inputDebounce,
+      onInput: l(this, x, "f"),
+      type: "search",
+      startImgSrc: j
+    }), i("div", {
+      class: "inner-container"
+    }, this.loading ? l(this, w, "f").call(this) : l(this, v, "f").call(this))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/plugin-explorer" ];
+  }
+  get el() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      plugins: [ "pluginsChangedHandler" ]
+    };
+  }
+};
+
+m = new WeakMap, d = new WeakMap, u = new WeakMap, h = new WeakMap, g = new WeakMap, 
+f = new WeakMap, b = new WeakMap, x = new WeakMap, v = new WeakMap, w = new WeakMap, 
+y = new WeakMap;
+
+W.style = c;
+
+export { W as gx_ide_plugin_explorer };
+//# sourceMappingURL=p-ef8663dd.entry.js.map

package/dist/genexus-ide-ui/p-ef8663dd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pluginExplorerCss","FILTER_ICON","getIconPath","category","name","colorType","EXTENSION_ICON_IMG","getAssetPath","CSS_BUNDLES","SEARCH_ICON","STAR_ICON","DOWNLOAD_ICON","GxIdePluginManager","_GxIdePluginManager_componentLocale","set","this","_GxIdePluginManager_animateEmptyState","_GxIdePluginManager_actionListButtonClickHandler","pluginId","action","event","stopPropagation","executeActionCallback","_GxIdePluginManager_downloadsFormatter","Intl","NumberFormat","undefined","notation","maximumFractionDigits","_GxIdePluginManager_formatDownloads","value","numericValue","Number","isFinite","__classPrivateFieldGet","format","_GxIdePluginManager_mapPluginToItem","pluginData","hasActionButton","hasDownloads","downloads","hasRating","rating","hasMeta","pluginItem","id","caption","imgSrc","iconUrl","type","additionalInformation","center","part","jsx","h","src","alt","logotype","replace","loading","end","title","call","start","description","publisher","installProgress","percent","class","minimal","active","stateType","progress","onClick","_GxIdePluginManager_mapPluginGroupsToActionListModel","groups","model","separatorItem","forEach","group","_a","plugins","length","push","expandable","_b","expanded","_c","items","map","plugin","_GxIdePluginManager_pluginsFilterInputHandler","async","filterValue","detail","filterCallback","_GxIdePluginManager_evaluateContentToDisplay","pluginsToDisplay","pluginsActionListModel","selection","onSelectedItemsChange","_GxIdePluginManager_pluginSelectedHandler","isAnimated","stateIconSrc","stateTitle","emptyStateTitle","stateDescription","emptyStateDescription","_GxIdePluginManager_renderLoader","__classPrivateFieldSet","loaderTitle","loaderDescription","show","eventType","item","showDetailsCallback","pluginsChangedHandler","newPlugins","componentWillLoad","Locale","getComponentStrings","el","render","Host","accessibleName","placeholder","searchInputPlaceholder","debounce","config","inputDebounce","onInput","startImgSrc"],"sources":["src/components/plugin-explorer/plugin-explorer.scss?tag=gx-ide-plugin-explorer&encapsulation=shadow","src/components/plugin-explorer/plugin-explorer.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: grid;\n  block-size: 100%;\n  position: relative;\n}\n\n.outer-container {\n  grid-template-rows: max-content 1fr;\n}\n.inner-container {\n  position: relative;\n}\n\n.list-box::part(item) {\n  width: 100%;\n  min-width: 100%;\n}\n.list-box::part(item__action) {\n  gap: var(--spacing-gap-xs);\n}\n.list-box::part(item__caption) {\n  font-weight: var(--font-style-semi-bold);\n  color: var(--color-text-neutral-default);\n  @include ellipsis();\n}\n\n// Caption row: name (flexible) + metadata pinned to the end\n.list-box::part(item__inline-caption) {\n  grid-template-columns: minmax(0, 1fr) max-content;\n  align-items: center;\n  gap: var(--spacing-gap-m);\n  width: 100%;\n  min-width: 100%;\n}\n\n// Group header: Mercury defaults it to body-m (14px), which reads too large\n// next to the 12px item text. Keep it compact so it looks like a section label.\n// The `:host` prefix raises specificity over Mercury's themed ::part rule\n// (same-specificity ::part rules from the adopted theme would otherwise win).\n:host .list-box::part(group__action),\n:host .list-box::part(group__caption) {\n  font-size: var(--font-size-body-s);\n  // The expand/collapse chevron is sized by these chameleon vars (Mercury sets\n  // them to --icon-s = 14px). Match the 12px header so it doesn't look oversized.\n  --ch-action-list-group__expandable-button-size: var(--icon-xs);\n  --ch-action-list-group__expandable-button-image-size: var(--icon-xs);\n}\n\n// Plugin logo\n.list-box::part(custom-image) {\n  block-size: 40px;\n  inline-size: 40px;\n  border-radius: var(--border-radius-m);\n  object-fit: cover;\n  margin-inline-end: 12px;\n}\n\n// Metadata (downloads + rating), aligned with the name\n.list-box::part(custom-meta) {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-m);\n}\n.list-box::part(custom-meta-item) {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs);\n  font-size: var(--font-size-body-s);\n  // Same emphasis as the title. Applied via `color` (not opacity) so the meta\n  // icons keep their own color (e.g. the rating star).\n  color: var(--color-text-neutral-default);\n  white-space: nowrap;\n}\n.list-box::part(custom-meta-icon) {\n  --ch-image-size: 14px;\n}\n\n// Content block (description + footer)\n.list-box::part(custom-container) {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-xs);\n  width: 100%;\n}\n.list-box::part(item__block-end start) {\n  width: 100%;\n  min-width: 100%;\n}\n// Description — second level: lighter than the title.\n.list-box::part(custom-description) {\n  font-size: var(--font-size-body-s);\n  margin: 0;\n  color: var(--color-text-neutral-neutral);\n  line-height: var(--line-height-relaxed);\n  margin-inline-end: 8px;\n  @include ellipsis();\n}\n\n// Footer row: publisher + action button.\n// Pin the row height to the standard control height so swapping the action\n// button for the install progress bar doesn't shift the layout.\n.list-box::part(custom-footer) {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-m);\n  width: 100%;\n  margin-block-start: 2px;\n  min-block-size: var(--control-block-size);\n}\n// Publisher — the least prominent line in the hierarchy: regular weight and\n// the most muted of the three text levels (below title and description).\n.list-box::part(custom-brand) {\n  font-weight: var(--font-style-regular);\n  font-size: var(--font-size-body-s);\n  color: var(--color-text-neutral-disabled);\n  @include ellipsis();\n}\n.list-box::part(custom-button) {\n  // WA: Style the button like a Mercury primary button\n  // \"Slot\" not working apparently.\n  --button-color: var(--color-text-primary-default);\n  margin-inline-start: auto;\n  display: inline-grid;\n  grid-auto-flow: column;\n  grid-auto-columns: max-content;\n  justify-content: center;\n  padding-block: var(--control-padding-block);\n  padding-inline: var(--control-padding-inline);\n  box-sizing: border-box;\n  color: var(--button-color);\n  // Match the surrounding text size so the action doesn't look oversized.\n  font-size: var(--font-size-body-s);\n  font-weight: var(--font-style-semi-bold);\n  text-transform: capitalize;\n}\n.list-box::part(custom-button):hover {\n  --button-color: var(--color-text-primary-hover);\n}\n.list-box::part(custom-button):active {\n  --button-color: var(--color-text-primary-pressed);\n}\n\n// The install progress is the shared gx-ide-progress-bar, rendered inside the\n// ch-action-list shadow tree via the item's jsx callback, so it must be sized\n// through ::part (like the other custom-* elements), not with plain selectors.\n// A percent label sits inline with the bar so the progress reads as part of\n// the row instead of a detached bar.\n.list-box::part(custom-progress) {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs);\n  margin-inline-start: auto;\n  inline-size: 140px;\n}\n.list-box::part(custom-progress-label) {\n  font-size: var(--font-size-caption-s);\n  line-height: 1;\n  color: var(--color-text-neutral-neutral);\n  white-space: nowrap;\n}\n.list-box::part(custom-progress-bar) {\n  flex: 1;\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  State,\n  Element,\n  h,\n  Watch,\n  getAssetPath\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\n\nimport { ActionListModel } from \"@genexus/chameleon-controls-library\";\nimport {\n  ActionListItemActionable,\n  ActionListItemGroup,\n  ActionListItemModelExtended,\n  ActionListItemSeparator\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nconst FILTER_ICON = getIconPath({\n  category: \"system\",\n  name: \"filters\",\n  colorType: \"on-surface\"\n});\n\n// plugin icon if no iconUrl was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n  `./gx-ide-assets/plugin-explorer/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/list-box\",\n  \"components/button\",\n  \"components/edit\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst SEARCH_ICON = getIconPath({\n  category: \"system\",\n  name: \"search\",\n  colorType: \"on-surface\"\n});\n\nconst STAR_ICON = getIconPath({\n  category: \"system\",\n  name: \"star-fill\",\n  colorType: \"warning\"\n});\n\nconst DOWNLOAD_ICON = getIconPath({\n  category: \"system\",\n  name: \"download\",\n  colorType: \"on-surface\"\n});\n\n@Component({\n  tag: \"gx-ide-plugin-explorer\",\n  styleUrl: \"plugin-explorer.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/plugin-explorer\"]\n})\nexport class GxIdePluginManager {\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  #animateEmptyState: boolean = false;\n\n  @Element() el: HTMLGxIdePluginExplorerElement;\n\n  /**\n   * If true it will hide the content, and display a loader\n   */\n  @State() loading: boolean = true;\n\n  /**\n   * The plugins model as ActionListModel, which is the model the ch-action-list expects\n   */\n  @State() pluginsActionListModel: ActionListModel = [];\n\n  /**\n   * List of plugin groups to display. Each group is rendered as a native\n   * action-list group (with a separator between groups) and its header caption\n   * includes the total number of plugins in the group.\n   * Usually used to initialize the component.\n   */\n  @Prop({ mutable: true }) plugins: PluginGroupData[];\n  @Watch(\"plugins\")\n  pluginsChangedHandler(newPlugins: PluginGroupData[]) {\n    this.pluginsActionListModel =\n      this.#mapPluginGroupsToActionListModel(newPlugins);\n    this.loading = false;\n  }\n\n  /**\n   * Callback that should be invoked when the user updates the filter.\n   * A debounce should be applied before invoking this function.\n   */\n  @Prop() readonly filterCallback!: (\n    text: string\n  ) => Promise<PluginGroupData[]>;\n\n  /**\n   * Callback that should be invoked when the user clicks or presses Enter\n   * on a selected plugin item.\n   */\n  @Prop() readonly showDetailsCallback!: (pluginId: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user clicks on a plugin's action button.\n   */\n  @Prop() readonly executeActionCallback!: (\n    pluginId: string,\n    action: PluginAction\n  ) => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.pluginsChangedHandler(this.plugins);\n  }\n\n  #actionListButtonClickHandler =\n    (pluginId: string, action: PluginAction) => (event: MouseEvent) => {\n      event.stopPropagation();\n      this.executeActionCallback(pluginId, action);\n    };\n\n  // Formats a raw downloads count into a compact string (e.g. 4000 -> \"4K\").\n  #downloadsFormatter = new Intl.NumberFormat(undefined, {\n    notation: \"compact\",\n    maximumFractionDigits: 1\n  });\n\n  #formatDownloads = (value: number): string => {\n    const numericValue = typeof value === \"number\" ? value : Number(value);\n    return Number.isFinite(numericValue)\n      ? this.#downloadsFormatter.format(numericValue)\n      : `${value}`;\n  };\n\n  #mapPluginToItem = (pluginData: PluginData): ActionListItemActionable => {\n    const hasActionButton = !!pluginData.action;\n    const hasDownloads =\n      pluginData.downloads !== undefined && pluginData.downloads !== null;\n    const hasRating =\n      pluginData.rating !== undefined && pluginData.rating !== null;\n    const hasMeta = hasDownloads || hasRating;\n\n    const pluginItem = {\n      id: pluginData.id,\n      caption: pluginData.name,\n      imgSrc: pluginData.iconUrl,\n      type: \"actionable\",\n\n      additionalInformation: {\n        \"stretch-start\": {\n          center: [\n            {\n              part: \"custom-image\",\n              jsx: () => (\n                <img\n                  part=\"custom-image\"\n                  src={pluginData.iconUrl || EXTENSION_ICON_IMG}\n                  alt={`${this.#componentLocale.logotype.replace(\n                    \"PLUGIN_NAME_PLACEHOLDER\",\n                    pluginData.name\n                  )}`}\n                  loading=\"lazy\"\n                />\n              )\n            }\n          ]\n        },\n        \"inline-caption\": hasMeta && {\n          end: [\n            {\n              part: \"custom-meta\",\n              jsx: () => (\n                <div part=\"custom-meta\">\n                  {hasDownloads && (\n                    <span\n                      part=\"custom-meta-item custom-downloads\"\n                      title={`${pluginData.downloads}`}\n                    >\n                      <ch-image\n                        part=\"custom-meta-icon custom-downloads-icon\"\n                        src={DOWNLOAD_ICON}\n                      ></ch-image>\n                      {this.#formatDownloads(pluginData.downloads)}\n                    </span>\n                  )}\n                  {hasRating && (\n                    <span\n                      part=\"custom-meta-item custom-rating\"\n                      title={`${pluginData.rating}`}\n                    >\n                      <ch-image\n                        part=\"custom-meta-icon custom-rating-icon\"\n                        src={STAR_ICON}\n                      ></ch-image>\n                      {pluginData.rating}\n                    </span>\n                  )}\n                </div>\n              )\n            }\n          ]\n        },\n        \"block-end\": {\n          start: [\n            {\n              part: \"custom-description custom-button custom-container custom-brand custom-footer custom-meta custom-meta-item custom-meta-icon custom-progress custom-progress-label custom-progress-bar item__block-end start\",\n              jsx: () => (\n                <div part=\"custom-container\">\n                  <p part=\"custom-description\" title={pluginData.description}>\n                    {pluginData.description}\n                  </p>\n                  <div part=\"custom-footer\">\n                    <small part=\"custom-brand\">{pluginData.publisher}</small>\n                    {pluginData.installProgress ? (\n                      <div part=\"custom-progress\">\n                        <span part=\"custom-progress-label\">\n                          {pluginData.installProgress.percent}%\n                        </span>\n                        <gx-ide-progress-bar\n                          part=\"custom-progress-bar\"\n                          class=\"plain\"\n                          minimal\n                          active\n                          stateType=\"in-progress\"\n                          progress={pluginData.installProgress.percent}\n                        ></gx-ide-progress-bar>\n                      </div>\n                    ) : hasActionButton ? (\n                      <button\n                        class=\"button\"\n                        part=\"custom-button\"\n                        onClick={this.#actionListButtonClickHandler(\n                          pluginData.id,\n                          pluginData.action\n                        )}\n                      >\n                        {pluginData.action}\n                      </button>\n                    ) : null}\n                  </div>\n                </div>\n              )\n            }\n            // {\n            //   slot: \"abcd\"\n            // } as ActionListItemAdditionalSlot // slot not working\n          ]\n        }\n      }\n    } as ActionListItemActionable;\n\n    return pluginItem;\n  };\n\n  // Builds the ch-action-list model from groups: one native action-list group\n  // per PluginGroupData, plus a separator between groups. The group header only\n  // renders a plain-text caption (no custom pill element is supported), so the\n  // per-group total is shown as a number appended to the caption.\n  #mapPluginGroupsToActionListModel = (\n    groups: PluginGroupData[]\n  ): ActionListModel => {\n    const model: ActionListModel = [];\n    const separatorItem: ActionListItemSeparator = { type: \"separator\" };\n\n    groups?.forEach(group => {\n      // Skip empty groups so we don't render a header with \"(0)\".\n      if (!group.plugins?.length) {\n        return;\n      }\n      if (model.length > 0) {\n        model.push(separatorItem);\n      }\n      model.push({\n        id: group.id,\n        type: \"group\",\n        caption: `${group.caption} (${group.plugins.length})`,\n        expandable: group.expandable ?? true,\n        expanded: group.expanded ?? true,\n        items: group.plugins.map(plugin => this.#mapPluginToItem(plugin))\n      } as ActionListItemGroup);\n    });\n\n    return model;\n  };\n\n  #pluginsFilterInputHandler = async (\n    event: CustomEvent<string> | InputEvent\n  ) => {\n    this.loading = true;\n    const filterValue = event.detail as string;\n    this.plugins = await this.filterCallback(filterValue);\n  };\n\n  #evaluateContentToDisplay = () => {\n    const pluginsToDisplay = this.pluginsActionListModel.length;\n    return pluginsToDisplay ? (\n      <ch-action-list-render\n        model={this.pluginsActionListModel}\n        class=\"list-box\"\n        selection=\"single\"\n        onSelectedItemsChange={this.#pluginSelectedHandler}\n      >\n        {/* <p slot=\"abcd\">Slot for \"abcd\" id</p> */}\n      </ch-action-list-render>\n    ) : (\n      <gx-ide-empty-state\n        isAnimated={this.#animateEmptyState}\n        class=\"recent-objects__empty-state\"\n        stateIconSrc={FILTER_ICON}\n        stateTitle={this.#componentLocale.emptyStateTitle}\n        stateDescription={this.#componentLocale.emptyStateDescription}\n      ></gx-ide-empty-state>\n    );\n  };\n\n  #renderLoader = () => {\n    this.#animateEmptyState = true;\n    return (\n      <gx-ide-loader\n        loaderTitle={this.#componentLocale.loaderTitle}\n        description={this.#componentLocale.loaderDescription}\n        show\n      ></gx-ide-loader>\n    );\n  };\n\n  #pluginSelectedHandler = (\n    event: CustomEvent<ActionListItemModelExtended[]>\n  ) => {\n    const eventType = event.detail[0]?.item.type;\n    if (eventType === \"actionable\") {\n      const pluginId = event.detail[0].item.id;\n      this.showDetailsCallback(pluginId);\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n\n        <div class=\"outer-container field-group\">\n          <ch-edit\n            id=\"search-plugins-input\"\n            class=\"input\"\n            accessibleName={this.#componentLocale.accessibleName}\n            placeholder={this.#componentLocale.searchInputPlaceholder}\n            debounce={config.inputDebounce}\n            onInput={this.#pluginsFilterInputHandler}\n            type=\"search\"\n            startImgSrc={SEARCH_ICON}\n          ></ch-edit>\n          <div class=\"inner-container\">\n            {this.loading\n              ? this.#renderLoader()\n              : this.#evaluateContentToDisplay()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type PluginGroupData = {\n  id: string;\n  /**\n   * Group header text. The total number of plugins in the group is appended\n   * automatically, e.g. \"Installed (12)\".\n   */\n  caption: string;\n  /**\n   * Whether the group can be collapsed/expanded. Defaults to `true`.\n   */\n  expandable?: boolean;\n  /**\n   * Whether the group starts expanded. Defaults to `true`.\n   */\n  expanded?: boolean;\n  plugins: PluginData[];\n};\n\nexport type PluginData = {\n  id: string;\n  iconUrl: string;\n  name: string;\n  description: string;\n  publisher: string;\n  action?: PluginAction;\n  downloads?: number;\n  rating?: string | number;\n  // When set, the card shows a determinate progress bar instead of the action button.\n  installProgress?: PluginInstallProgress;\n};\n\nexport type PluginInstallProgress = {\n  phase: \"download\" | \"install\";\n  percent: number;\n};\n\nexport type PluginAction = \"install\" | \"update\";\n"],"mappings":"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"}

package/dist/types/components/db-properties-configurator/db-properties-configurator.d.ts

@@ -22,6 +22,10 @@ export declare class GxIdeDbPropertiesConfigurator {
      */
     readonly propertyChangeCallback: PropertyChangeCallback;
     componentWillLoad(): Promise<void>;
+    /**
+     * Suspends or reactivates the shortcuts.
+     */
+    suspendShortcuts(suspendShortcuts: boolean): Promise<void>;
     render(): any;
 }
 export type DSControlKind = "checkbox" | "text" | "password" | "combo" | "combo-editable" | "custom" | "readonly";

package/dist/types/components/plugin-details/plugin-details.d.ts

@@ -10,9 +10,19 @@ export declare class GxIdePluginDetails {
     readonly data: PluginDetailsData;
     /**
      * Callback that should be invoked when the user performs the install or update action.
-     * Receives an optional version string when a specific version is selected.
+     * Receives the ordinal versionId of the selected version (undefined installs the latest).
      */
-    readonly installCallback: (version?: string) => Promise<void>;
+    readonly installCallback: (versionId?: number) => Promise<void>;
+    /**
+     * When set, the component is installing this plugin and shows a determinate progress bar
+     * instead of the action button.
+     */
+    readonly installProgress?: PluginInstallProgress;
+    /**
+     * Callback that should be invoked when the user cancels an in-progress
+     * install/update from the progress bar.
+     */
+    readonly cancelCallback: () => Promise<void>;
     /**
      * Callback that should be invoked when the user attempts to open any link displayed in this component.
      */
@@ -42,13 +52,21 @@ export type DocSectionData = {
     name: string;
     content: string;
 };
+export type PluginVersionOption = {
+    version: string;
+    versionId: number;
+};
+export type PluginInstallProgress = {
+    phase: "download" | "install";
+    percent: number;
+};
 export type PluginDetailsData = {
     id: string;
     name: string | LinkData;
     publisher: string | LinkData;
     installed: boolean;
     updateVersion?: string;
-    versions: string[];
+    versions: PluginVersionOption[];
     iconUrl: string;
     description: string;
     docSections: DocSectionData[];

package/dist/types/components/plugin-explorer/plugin-explorer.d.ts

@@ -11,15 +11,18 @@ export declare class GxIdePluginManager {
      */
     pluginsActionListModel: ActionListModel;
     /**
-     * List of plugins to display. Usually used to initialize the component.
+     * List of plugin groups to display. Each group is rendered as a native
+     * action-list group (with a separator between groups) and its header caption
+     * includes the total number of plugins in the group.
+     * Usually used to initialize the component.
      */
-    plugins: PluginData[];
-    pluginsChangedHandler(newPlugins: PluginData[]): void;
+    plugins: PluginGroupData[];
+    pluginsChangedHandler(newPlugins: PluginGroupData[]): void;
     /**
      * Callback that should be invoked when the user updates the filter.
      * A debounce should be applied before invoking this function.
      */
-    readonly filterCallback: (text: string) => Promise<PluginData[]>;
+    readonly filterCallback: (text: string) => Promise<PluginGroupData[]>;
     /**
      * Callback that should be invoked when the user clicks or presses Enter
      * on a selected plugin item.
@@ -32,6 +35,23 @@ export declare class GxIdePluginManager {
     componentWillLoad(): Promise<void>;
     render(): any;
 }
+export type PluginGroupData = {
+    id: string;
+    /**
+     * Group header text. The total number of plugins in the group is appended
+     * automatically, e.g. "Installed (12)".
+     */
+    caption: string;
+    /**
+     * Whether the group can be collapsed/expanded. Defaults to `true`.
+     */
+    expandable?: boolean;
+    /**
+     * Whether the group starts expanded. Defaults to `true`.
+     */
+    expanded?: boolean;
+    plugins: PluginData[];
+};
 export type PluginData = {
     id: string;
     iconUrl: string;
@@ -39,5 +59,12 @@ export type PluginData = {
     description: string;
     publisher: string;
     action?: PluginAction;
+    downloads?: number;
+    rating?: string | number;
+    installProgress?: PluginInstallProgress;
+};
+export type PluginInstallProgress = {
+    phase: "download" | "install";
+    percent: number;
 };
 export type PluginAction = "install" | "update";