@genexus/genexus-ide-ui 3.2.21 → 3.2.22

package/dist/esm/gx-ide-plugin-details.entry.js

@@ -6,7 +6,7 @@ import 'lit/directives/when.js';
 import 'lit/directives/if-defined.js';
 import { L as Locale } from './locale-e5107fad.js';
 
-const pluginDetailsCss = "ch-tab-render.tab{background-color:transparent;border-color:transparent}ch-tab-render.tab::part(tab-list block-start){border-block-end:none}ch-tab-render.tab::part(tab block closable),ch-tab-render.tab::part(tab block not-closable){background-color:transparent}:host{display:grid;block-size:100%;grid-template-areas:\"header header\" \"main aside\";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:var(--spacing-gap-l)}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:\"plugin-icon plugin-details\";grid-template-columns:64px 1fr;column-gap:var(--spacing-gap-xl);padding-block-start:var(--spacing-padding-xxl);padding-block-end:var(--spacing-padding-xl);padding-inline:var(--spacing-padding-xxl)}.plugin__icon{grid-area:plugin-icon;inline-size:100%;block-size:auto;display:block}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.plugin__publisher{display:flex;align-items:center;gap:var(--spacing-gap-xs)}.plugin__description{line-height:var(--line-height-spacious)}.plugin__actions-container{margin-block-start:var(--spacing-padding-m);align-items:center}.action-button{min-inline-size:100px}.action-button.more-versions-available{border-start-end-radius:0 !important;border-end-end-radius:0 !important}.installed-container{display:flex;align-items:center;gap:var(--spacing-gap-m)}.installed-container ch-image{--ch-image-size:20px}.main{grid-area:main}.docsTab{block-size:100%}.aside{grid-area:aside;overflow:auto;border-block-start:1px solid var(--items-container__border-color)}.fields__list{list-style:none;padding:0;margin:0;font-size:var(--font-size-body-s)}.plugin__info-category{display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.plugin__info-category:not(:first-child){padding-block-start:var(--spacing-padding-xl);margin-block-start:var(--spacing-padding-xl);border-block-start:1px solid var(--color-border-surface-on-elevation-1)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:var(--spacing-gap-xl)}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-gap-m)}.fields__list--as-tags .field__li{border:1px solid var(--color-border-surface-on-elevation-1);padding-block:var(--spacing-padding-xxs);padding-inline:var(--spacing-padding-m);border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--color-text-neutral-strawberry)}.fields__list--as-tags .field__link:hover{color:var(--color-accent-primary-default)}.fields__list--as-tags .field__link:active{color:var(--color-accent-primary-hover)}.field__name,.field__value{flex:1}.field__link{color:var(--color-accent-primary-default)}.field__link:hover{color:var(--color-accent-primary-hover)}.field__link:active{color:var(--color-accent-primary-pressed)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( (var(--control-block-size) - 2 * var(--control-border-width) - 16px) / 2 ) !important;border-start-start-radius:0 !important;border-end-start-radius:0 !important}.version-buttons-container{display:flex;align-items:center;gap:1px}ch-markdown-viewer{block-size:100%;overflow:auto}.text-underline{text-decoration:underline}";
+const pluginDetailsCss = "ch-tab-render.tab{background-color:transparent;border-color:transparent}ch-tab-render.tab::part(tab-list block-start){border-block-end:none}ch-tab-render.tab::part(tab block closable),ch-tab-render.tab::part(tab block not-closable){background-color:transparent}:host{display:grid;block-size:100%;grid-template-areas:\"header header\" \"main aside\";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:var(--spacing-gap-l)}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:\"plugin-icon plugin-details\";grid-template-columns:64px 1fr;column-gap:var(--spacing-gap-xl);padding-block-start:var(--spacing-padding-xxl);padding-block-end:var(--spacing-padding-xl);padding-inline:var(--spacing-padding-xxl)}.plugin__icon{grid-area:plugin-icon;inline-size:100%;block-size:auto;display:block}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.plugin__publisher{display:flex;align-items:center;gap:var(--spacing-gap-xs)}.plugin__description{line-height:var(--line-height-spacious)}.plugin__actions-container{margin-block-start:var(--spacing-padding-m);align-items:center;min-block-size:calc(var(--control-block-size) + var(--spacing-gap-xs) + 4px)}.action-button{min-inline-size:100px}.action-button.more-versions-available{border-start-end-radius:0 !important;border-end-end-radius:0 !important}.installed-container{display:flex;align-items:center;gap:var(--spacing-gap-m)}.installed-container ch-image{--ch-image-size:20px}.main{grid-area:main}.docsTab{block-size:100%}.aside{grid-area:aside;overflow:auto;border-block-start:1px solid var(--items-container__border-color)}.fields__list{list-style:none;padding:0;margin:0;font-size:var(--font-size-body-s)}.plugin__info-category{display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.plugin__info-category:not(:first-child){padding-block-start:var(--spacing-padding-xl);margin-block-start:var(--spacing-padding-xl);border-block-start:1px solid var(--color-border-surface-on-elevation-1)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:var(--spacing-gap-xl)}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-gap-m)}.fields__list--as-tags .field__li{border:1px solid var(--color-border-surface-on-elevation-1);padding-block:var(--spacing-padding-xxs);padding-inline:var(--spacing-padding-m);border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--color-text-neutral-strawberry)}.fields__list--as-tags .field__link:hover{color:var(--color-accent-primary-default)}.fields__list--as-tags .field__link:active{color:var(--color-accent-primary-hover)}.field__name,.field__value{flex:1}.field__link{color:var(--color-accent-primary-default)}.field__link:hover{color:var(--color-accent-primary-hover)}.field__link:active{color:var(--color-accent-primary-pressed)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( (var(--control-block-size) - 2 * var(--control-border-width) - 16px) / 2 ) !important;border-start-start-radius:0 !important;border-end-start-radius:0 !important}.version-buttons-container{display:flex;align-items:stretch;gap:1px}.install-progress{flex:1;min-inline-size:220px}ch-markdown-viewer{block-size:100%;overflow:auto}.text-underline{text-decoration:underline}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -24,7 +24,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdePluginDetails_componentLocale, _GxIdePluginDetails_chMarkdownViewer, _GxIdePluginDetails_docSectionIdDescriptionMap, _GxIdePluginDetails_versionsMenuOptionsModel, _GxIdePluginDetails_menuVersionSelectedHandler, _GxIdePluginDetails_renderUninstallButton, _GxIdePluginDetails_installClickedHandler, _GxIdePluginDetails_updateVersionHandler, _GxIdePluginDetails_openLinkHandler, _GxIdePluginDetails_uninstallClickedHandler, _GxIdePluginDetails_renderActionButtons, _GxIdePluginDetails_tabSelectionChangedHandler, _GxIdePluginDetails_renderDocSectionsSlots, _GxIdePluginDetails_returnFormatedId, _GxIdePluginDetails_renderLinkTag, _GxIdePluginDetails_renderAsideContent;
+var _GxIdePluginDetails_componentLocale, _GxIdePluginDetails_chMarkdownViewer, _GxIdePluginDetails_docSectionIdDescriptionMap, _GxIdePluginDetails_versionsMenuOptionsModel, _GxIdePluginDetails_menuVersionSelectedHandler, _GxIdePluginDetails_renderUninstallButton, _GxIdePluginDetails_latestVersionId, _GxIdePluginDetails_installClickedHandler, _GxIdePluginDetails_openLinkHandler, _GxIdePluginDetails_uninstallClickedHandler, _GxIdePluginDetails_cancelClickedHandler, _GxIdePluginDetails_renderInstallProgress, _GxIdePluginDetails_renderActionButtons, _GxIdePluginDetails_tabSelectionChangedHandler, _GxIdePluginDetails_renderDocSectionsSlots, _GxIdePluginDetails_returnFormatedId, _GxIdePluginDetails_renderLinkTag, _GxIdePluginDetails_renderAsideContent;
 const USER_ICON = getIconPath({
     category: "system",
     name: "user",
@@ -71,22 +71,22 @@ const GxIdePluginDetails = class {
         _GxIdePluginDetails_versionsMenuOptionsModel.set(this, () => {
             var _a;
             const versionsToUpdateMenusModel = (_a = this.data.versions) === null || _a === void 0 ? void 0 : _a.map(version => {
-                return { id: version, caption: version };
+                // The menu id carries the ordinal versionId; the caption shows the human-readable version.
+                return { id: String(version.versionId), caption: version.version };
             });
             return versionsToUpdateMenusModel;
         });
         _GxIdePluginDetails_menuVersionSelectedHandler.set(this, (event) => {
-            const selectedVersion = event.detail.id;
-            this.installCallback(selectedVersion);
+            const selectedVersionId = event.detail.id;
+            this.installCallback(selectedVersionId != null ? Number(selectedVersionId) : undefined);
         });
         _GxIdePluginDetails_renderUninstallButton.set(this, () => {
             return (h("button", { class: "button-tertiary", onClick: __classPrivateFieldGet(this, _GxIdePluginDetails_uninstallClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.uninstall));
         });
+        // The latest version is listed first; its ordinal drives install/update from the primary button.
+        _GxIdePluginDetails_latestVersionId.set(this, () => { var _a, _b; return (_b = (_a = this.data.versions) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.versionId; });
         _GxIdePluginDetails_installClickedHandler.set(this, () => {
-            this.installCallback();
-        });
-        _GxIdePluginDetails_updateVersionHandler.set(this, (id) => () => {
-            this.installCallback(id);
+            this.installCallback(__classPrivateFieldGet(this, _GxIdePluginDetails_latestVersionId, "f").call(this));
         });
         _GxIdePluginDetails_openLinkHandler.set(this, (link) => (event) => {
             if (this.openLinkCallback) {
@@ -97,19 +97,33 @@ const GxIdePluginDetails = class {
         _GxIdePluginDetails_uninstallClickedHandler.set(this, () => {
             this.uninstallCallback();
         });
+        _GxIdePluginDetails_cancelClickedHandler.set(this, () => {
+            this.cancelCallback();
+        });
+        _GxIdePluginDetails_renderInstallProgress.set(this, () => {
+            const { phase, percent } = this.installProgress;
+            const caption = phase === "download"
+                ? __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.downloading
+                : __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.installing;
+            return (h("gx-ide-progress-bar", { class: "install-progress plain", active: true, caption: `${caption} ${percent}%`, progress: percent, stateType: "in-progress", closeType: "button", closedCallback: __classPrivateFieldGet(this, _GxIdePluginDetails_cancelClickedHandler, "f") }));
+        });
         _GxIdePluginDetails_renderActionButtons.set(this, () => {
             var _a;
+            // While an install/update is running, replace the buttons with a determinate progress bar.
+            if (this.installProgress) {
+                return __classPrivateFieldGet(this, _GxIdePluginDetails_renderInstallProgress, "f").call(this);
+            }
             let actionButtonCaption;
             let actionButtonClasses = "button-primary action-button";
             let actionButtonCallback;
-            const moreVersionsToUpdate = (_a = this.data.versions) === null || _a === void 0 ? void 0 : _a.length;
+            const moreVersionsToUpdate = ((_a = this.data.versions) === null || _a === void 0 ? void 0 : _a.length) > 1;
             if (!this.data.installed) {
                 actionButtonCaption = __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.install;
                 actionButtonCallback = __classPrivateFieldGet(this, _GxIdePluginDetails_installClickedHandler, "f");
             }
             else if (this.data.updateVersion) {
                 actionButtonCaption = `${__classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.updateTo} ${this.data.updateVersion}`;
-                actionButtonCallback = __classPrivateFieldGet(this, _GxIdePluginDetails_updateVersionHandler, "f").call(this, this.data.updateVersion);
+                actionButtonCallback = () => this.installCallback(__classPrivateFieldGet(this, _GxIdePluginDetails_latestVersionId, "f").call(this));
             }
             else {
                 actionButtonCaption = __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.installed;
@@ -163,6 +177,8 @@ const GxIdePluginDetails = class {
         this.selectedTabId = undefined;
         this.data = undefined;
         this.installCallback = undefined;
+        this.installProgress = undefined;
+        this.cancelCallback = undefined;
         this.openLinkCallback = undefined;
         this.uninstallCallback = undefined;
     }
@@ -184,7 +200,9 @@ const GxIdePluginDetails = class {
         }
     }
     componentDidLoad() {
-        __classPrivateFieldGet(this, _GxIdePluginDetails_chMarkdownViewer, "f").addEventListener("click", event => {
+        var _a;
+        // Guard: #chMarkdownViewer is unset when there are no docSections.
+        (_a = __classPrivateFieldGet(this, _GxIdePluginDetails_chMarkdownViewer, "f")) === null || _a === void 0 ? void 0 : _a.addEventListener("click", event => {
             // Listens for clicks on links inside <ch-markdown-viewer>.
             // If a link (<a>) is clicked and openLinkCallback is defined,
             // it prevents the default navigation and delegates the event
@@ -214,7 +232,7 @@ const GxIdePluginDetails = class {
     static get assetsDirs() { return ["gx-ide-assets/plugin-details"]; }
     get el() { return getElement(this); }
 };
-_GxIdePluginDetails_componentLocale = new WeakMap(), _GxIdePluginDetails_chMarkdownViewer = new WeakMap(), _GxIdePluginDetails_docSectionIdDescriptionMap = new WeakMap(), _GxIdePluginDetails_versionsMenuOptionsModel = new WeakMap(), _GxIdePluginDetails_menuVersionSelectedHandler = new WeakMap(), _GxIdePluginDetails_renderUninstallButton = new WeakMap(), _GxIdePluginDetails_installClickedHandler = new WeakMap(), _GxIdePluginDetails_updateVersionHandler = new WeakMap(), _GxIdePluginDetails_openLinkHandler = new WeakMap(), _GxIdePluginDetails_uninstallClickedHandler = new WeakMap(), _GxIdePluginDetails_renderActionButtons = new WeakMap(), _GxIdePluginDetails_tabSelectionChangedHandler = new WeakMap(), _GxIdePluginDetails_renderDocSectionsSlots = new WeakMap(), _GxIdePluginDetails_returnFormatedId = new WeakMap(), _GxIdePluginDetails_renderLinkTag = new WeakMap(), _GxIdePluginDetails_renderAsideContent = new WeakMap();
+_GxIdePluginDetails_componentLocale = new WeakMap(), _GxIdePluginDetails_chMarkdownViewer = new WeakMap(), _GxIdePluginDetails_docSectionIdDescriptionMap = new WeakMap(), _GxIdePluginDetails_versionsMenuOptionsModel = new WeakMap(), _GxIdePluginDetails_menuVersionSelectedHandler = new WeakMap(), _GxIdePluginDetails_renderUninstallButton = new WeakMap(), _GxIdePluginDetails_latestVersionId = new WeakMap(), _GxIdePluginDetails_installClickedHandler = new WeakMap(), _GxIdePluginDetails_openLinkHandler = new WeakMap(), _GxIdePluginDetails_uninstallClickedHandler = new WeakMap(), _GxIdePluginDetails_cancelClickedHandler = new WeakMap(), _GxIdePluginDetails_renderInstallProgress = new WeakMap(), _GxIdePluginDetails_renderActionButtons = new WeakMap(), _GxIdePluginDetails_tabSelectionChangedHandler = new WeakMap(), _GxIdePluginDetails_renderDocSectionsSlots = new WeakMap(), _GxIdePluginDetails_returnFormatedId = new WeakMap(), _GxIdePluginDetails_renderLinkTag = new WeakMap(), _GxIdePluginDetails_renderAsideContent = new WeakMap();
 GxIdePluginDetails.style = pluginDetailsCss;
 
 export { GxIdePluginDetails as gx_ide_plugin_details };

package/dist/esm/gx-ide-plugin-details.entry.js.map

@@ -1 +1 @@
-{"file":"gx-ide-plugin-details.entry.js","mappings":"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","names":[],"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}\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: 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-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 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-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 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"],"version":3}
+{"file":"gx-ide-plugin-details.entry.js","mappings":"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","names":[],"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"],"version":3}

package/dist/esm/gx-ide-plugin-explorer.entry.js

@@ -7,7 +7,7 @@ import 'lit/directives/if-defined.js';
 import { L as Locale } from './locale-e5107fad.js';
 import { c as config } from './config-5a775b7a.js';
 
-const pluginExplorerCss = ":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)}.list-box::part(custom-container){display:flex;flex-direction:column;gap:var(--spacing-gap-xs);width:100%}.list-box::part(custom-image){block-size:32px;inline-size:32px;margin-inline-end:12px}.list-box::part(custom-description){font-size:var(--font-size-body-s);margin:0;opacity:0.8;line-height:var(--line-height-relaxed);margin-inline-end:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-box::part(item__block-end start){width:100%;min-width:100%}.list-box::part(custom-brand){font-weight:var(--font-style-semi-bold);display:flex;gap:var(--spacing-gap-xs);align-items:center}.list-box::part(custom-brand-icon){--icon-path:var(--icon__system_user_neutral--enabled);display:inline-block;background-image:var(--icon-path);background-size:contain;background-repeat:no-repeat;background-position:center center;block-size:16px;inline-size:16px}.list-box::part(custom-button){--button-color:var(--color-text-primary-default);--button-color--enabled:var(--color-text-neutral-on-text);--button-color--active:var(--color-text-neutral-on-pressed);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-weight:var(--font-style-semi-bold);margin-block-end:auto;margin-block-start:auto;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)}";
+const pluginExplorerCss = ":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 __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -25,14 +25,14 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _GxIdePluginManager_componentLocale, _GxIdePluginManager_animateEmptyState, _GxIdePluginManager_actionListButtonClickHandler, _GxIdePluginManager_mapPluginDataToActionListModel, _GxIdePluginManager_pluginsFilterInputHandler, _GxIdePluginManager_evaluateContentToDisplay, _GxIdePluginManager_renderLoader, _GxIdePluginManager_pluginSelectedHandler;
+var _GxIdePluginManager_componentLocale, _GxIdePluginManager_animateEmptyState, _GxIdePluginManager_actionListButtonClickHandler, _GxIdePluginManager_downloadsFormatter, _GxIdePluginManager_formatDownloads, _GxIdePluginManager_mapPluginToItem, _GxIdePluginManager_mapPluginGroupsToActionListModel, _GxIdePluginManager_pluginsFilterInputHandler, _GxIdePluginManager_evaluateContentToDisplay, _GxIdePluginManager_renderLoader, _GxIdePluginManager_pluginSelectedHandler;
 const FILTER_ICON = getIconPath({
     category: "system",
     name: "filters",
     colorType: "on-surface"
 });
 // plugin icon if no iconUrl was provided
-const EXTENSION_ICON_IMG = getAssetPath(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);
+const EXTENSION_ICON_IMG = getAssetPath(`./gx-ide-assets/plugin-explorer/images/plugin-icon.svg`);
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "components/list-box",
@@ -44,6 +44,21 @@ const CSS_BUNDLES = [
     "utils/spacing",
     "chameleon/scrollbar"
 ];
+const SEARCH_ICON = getIconPath({
+    category: "system",
+    name: "search",
+    colorType: "on-surface"
+});
+const STAR_ICON = getIconPath({
+    category: "system",
+    name: "star-fill",
+    colorType: "warning"
+});
+const DOWNLOAD_ICON = getIconPath({
+    category: "system",
+    name: "download",
+    colorType: "on-surface"
+});
 const GxIdePluginManager = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -57,51 +72,85 @@ const GxIdePluginManager = class {
             event.stopPropagation();
             this.executeActionCallback(pluginId, action);
         });
-        _GxIdePluginManager_mapPluginDataToActionListModel.set(this, (pluginsData) => {
-            const pluginsActionListModel = [];
-            const separatorItem = { type: "separator" };
-            pluginsData === null || pluginsData === void 0 ? void 0 : pluginsData.forEach((pluginData, index) => {
-                const hasActionButton = !!pluginData.action;
-                const pluginItem = {
-                    id: pluginData.id,
-                    caption: pluginData.name,
-                    imgSrc: pluginData.iconUrl,
-                    type: "actionable",
-                    additionalInformation: {
-                        "stretch-start": {
-                            center: [
-                                {
-                                    part: "custom-image",
-                                    jsx: () => (h("img", { part: "custom-image", src: pluginData.iconUrl || EXTENSION_ICON_IMG, alt: `${__classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").logotype.replace("PLUGIN_NAME_PLACEHOLDER", pluginData.name)}`, loading: "lazy" }))
-                                }
-                            ]
-                        },
-                        "block-end": {
-                            start: [
-                                {
-                                    part: "custom-description custom-button custom-container custom-brand custom-brand-icon custom-image item__block-end start",
-                                    jsx: () => (h("div", { part: "custom-container", title: pluginData.description }, h("p", { part: "custom-description" }, pluginData.description), h("small", { part: "custom-brand" }, pluginData.publisher)))
-                                }
-                                // {
-                                //   slot: "abcd"
-                                // } as ActionListItemAdditionalSlot // slot not working
-                            ]
-                        },
-                        "stretch-end": hasActionButton && {
-                            center: [
-                                {
-                                    jsx: () => (h("button", { part: "custom-button", onClick: __classPrivateFieldGet(this, _GxIdePluginManager_actionListButtonClickHandler, "f").call(this, pluginData.id, pluginData.action) }, pluginData.action))
-                                }
-                            ]
-                        }
+        // Formats a raw downloads count into a compact string (e.g. 4000 -> "4K").
+        _GxIdePluginManager_downloadsFormatter.set(this, new Intl.NumberFormat(undefined, {
+            notation: "compact",
+            maximumFractionDigits: 1
+        }));
+        _GxIdePluginManager_formatDownloads.set(this, (value) => {
+            const numericValue = typeof value === "number" ? value : Number(value);
+            return Number.isFinite(numericValue)
+                ? __classPrivateFieldGet(this, _GxIdePluginManager_downloadsFormatter, "f").format(numericValue)
+                : `${value}`;
+        });
+        _GxIdePluginManager_mapPluginToItem.set(this, (pluginData) => {
+            const hasActionButton = !!pluginData.action;
+            const hasDownloads = pluginData.downloads !== undefined && pluginData.downloads !== null;
+            const hasRating = pluginData.rating !== undefined && pluginData.rating !== null;
+            const hasMeta = hasDownloads || hasRating;
+            const pluginItem = {
+                id: pluginData.id,
+                caption: pluginData.name,
+                imgSrc: pluginData.iconUrl,
+                type: "actionable",
+                additionalInformation: {
+                    "stretch-start": {
+                        center: [
+                            {
+                                part: "custom-image",
+                                jsx: () => (h("img", { part: "custom-image", src: pluginData.iconUrl || EXTENSION_ICON_IMG, alt: `${__classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").logotype.replace("PLUGIN_NAME_PLACEHOLDER", pluginData.name)}`, loading: "lazy" }))
+                            }
+                        ]
+                    },
+                    "inline-caption": hasMeta && {
+                        end: [
+                            {
+                                part: "custom-meta",
+                                jsx: () => (h("div", { part: "custom-meta" }, hasDownloads && (h("span", { part: "custom-meta-item custom-downloads", title: `${pluginData.downloads}` }, h("ch-image", { part: "custom-meta-icon custom-downloads-icon", src: DOWNLOAD_ICON }), __classPrivateFieldGet(this, _GxIdePluginManager_formatDownloads, "f").call(this, pluginData.downloads))), hasRating && (h("span", { part: "custom-meta-item custom-rating", title: `${pluginData.rating}` }, h("ch-image", { part: "custom-meta-icon custom-rating-icon", src: STAR_ICON }), pluginData.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: () => (h("div", { part: "custom-container" }, h("p", { part: "custom-description", title: pluginData.description }, pluginData.description), h("div", { part: "custom-footer" }, h("small", { part: "custom-brand" }, pluginData.publisher), pluginData.installProgress ? (h("div", { part: "custom-progress" }, h("span", { part: "custom-progress-label" }, pluginData.installProgress.percent, "%"), h("gx-ide-progress-bar", { part: "custom-progress-bar", class: "plain", minimal: true, active: true, stateType: "in-progress", progress: pluginData.installProgress.percent }))) : hasActionButton ? (h("button", { class: "button", part: "custom-button", onClick: __classPrivateFieldGet(this, _GxIdePluginManager_actionListButtonClickHandler, "f").call(this, pluginData.id, pluginData.action) }, pluginData.action)) : null)))
+                            }
+                            // {
+                            //   slot: "abcd"
+                            // } as ActionListItemAdditionalSlot // slot not working
+                        ]
                     }
-                };
-                if (index !== 0) {
-                    pluginsActionListModel.push(separatorItem);
                 }
-                pluginsActionListModel.push(pluginItem);
+            };
+            return pluginItem;
+        });
+        // 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.
+        _GxIdePluginManager_mapPluginGroupsToActionListModel.set(this, (groups) => {
+            const model = [];
+            const separatorItem = { type: "separator" };
+            groups === null || groups === void 0 ? void 0 : groups.forEach(group => {
+                var _a, _b, _c;
+                // Skip empty groups so we don't render a header with "(0)".
+                if (!((_a = group.plugins) === null || _a === void 0 ? void 0 : _a.length)) {
+                    return;
+                }
+                if (model.length > 0) {
+                    model.push(separatorItem);
+                }
+                model.push({
+                    id: group.id,
+                    type: "group",
+                    caption: `${group.caption} (${group.plugins.length})`,
+                    expandable: (_b = group.expandable) !== null && _b !== void 0 ? _b : true,
+                    expanded: (_c = group.expanded) !== null && _c !== void 0 ? _c : true,
+                    items: group.plugins.map(plugin => __classPrivateFieldGet(this, _GxIdePluginManager_mapPluginToItem, "f").call(this, plugin))
+                });
             });
-            return pluginsActionListModel;
+            return model;
         });
         _GxIdePluginManager_pluginsFilterInputHandler.set(this, async (event) => {
             this.loading = true;
@@ -133,7 +182,7 @@ const GxIdePluginManager = class {
     }
     pluginsChangedHandler(newPlugins) {
         this.pluginsActionListModel =
-            __classPrivateFieldGet(this, _GxIdePluginManager_mapPluginDataToActionListModel, "f").call(this, newPlugins);
+            __classPrivateFieldGet(this, _GxIdePluginManager_mapPluginGroupsToActionListModel, "f").call(this, newPlugins);
         this.loading = false;
     }
     async componentWillLoad() {
@@ -141,7 +190,7 @@ const GxIdePluginManager = class {
         this.pluginsChangedHandler(this.plugins);
     }
     render() {
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "outer-container field-group" }, h("ch-edit", { id: "search-plugins-input", class: "input", accessibleName: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").accessibleName, placeholder: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").searchInputPlaceholder, debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdePluginManager_pluginsFilterInputHandler, "f"), type: "search" }), h("div", { class: "inner-container" }, this.loading
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "outer-container field-group" }, h("ch-edit", { id: "search-plugins-input", class: "input", accessibleName: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").accessibleName, placeholder: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").searchInputPlaceholder, debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdePluginManager_pluginsFilterInputHandler, "f"), type: "search", startImgSrc: SEARCH_ICON }), h("div", { class: "inner-container" }, this.loading
             ? __classPrivateFieldGet(this, _GxIdePluginManager_renderLoader, "f").call(this)
             : __classPrivateFieldGet(this, _GxIdePluginManager_evaluateContentToDisplay, "f").call(this)))));
     }
@@ -151,7 +200,7 @@ const GxIdePluginManager = class {
         "plugins": ["pluginsChangedHandler"]
     }; }
 };
-_GxIdePluginManager_componentLocale = new WeakMap(), _GxIdePluginManager_animateEmptyState = new WeakMap(), _GxIdePluginManager_actionListButtonClickHandler = new WeakMap(), _GxIdePluginManager_mapPluginDataToActionListModel = new WeakMap(), _GxIdePluginManager_pluginsFilterInputHandler = new WeakMap(), _GxIdePluginManager_evaluateContentToDisplay = new WeakMap(), _GxIdePluginManager_renderLoader = new WeakMap(), _GxIdePluginManager_pluginSelectedHandler = new WeakMap();
+_GxIdePluginManager_componentLocale = new WeakMap(), _GxIdePluginManager_animateEmptyState = new WeakMap(), _GxIdePluginManager_actionListButtonClickHandler = new WeakMap(), _GxIdePluginManager_downloadsFormatter = new WeakMap(), _GxIdePluginManager_formatDownloads = new WeakMap(), _GxIdePluginManager_mapPluginToItem = new WeakMap(), _GxIdePluginManager_mapPluginGroupsToActionListModel = new WeakMap(), _GxIdePluginManager_pluginsFilterInputHandler = new WeakMap(), _GxIdePluginManager_evaluateContentToDisplay = new WeakMap(), _GxIdePluginManager_renderLoader = new WeakMap(), _GxIdePluginManager_pluginSelectedHandler = new WeakMap();
 GxIdePluginManager.style = pluginExplorerCss;
 
 export { GxIdePluginManager as gx_ide_plugin_explorer };

package/dist/esm/gx-ide-plugin-explorer.entry.js.map

@@ -1 +1 @@
-{"file":"gx-ide-plugin-explorer.entry.js","mappings":"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","names":[],"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}\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(custom-image) {\n  block-size: 32px;\n  inline-size: 32px;\n  margin-inline-end: 12px;\n}\n.list-box::part(custom-description) {\n  font-size: var(--font-size-body-s);\n  margin: 0;\n  opacity: 0.8;\n  line-height: var(--line-height-relaxed);\n  margin-inline-end: 8px;\n  @include ellipsis();\n}\n.list-box::part(item__block-end start) {\n  width: 100%;\n  min-width: 100%;\n}\n.list-box::part(custom-brand) {\n  font-weight: var(--font-style-semi-bold);\n  display: flex;\n  gap: var(--spacing-gap-xs);\n  align-items: center;\n}\n.list-box::part(custom-brand-icon) {\n  // --icon-path: var(--icon__system_publish_on-elevation--enabled);\n  --icon-path: var(--icon__system_user_neutral--enabled);\n  display: inline-block;\n  background-image: var(--icon-path);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center center;\n  block-size: 16px;\n  inline-size: 16px;\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  --button-color--enabled: var(--color-text-neutral-on-text);\n  --button-color--active: var(--color-text-neutral-on-pressed);\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  font-weight: var(--font-style-semi-bold);\n  margin-block-end: auto;\n  margin-block-start: auto;\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","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  ActionListItemModel,\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-manager/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\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 plugins to display. Usually used to initialize the component.\n   */\n  @Prop({ mutable: true }) plugins: PluginData[];\n  @Watch(\"plugins\")\n  pluginsChangedHandler(newPlugins: PluginData[]) {\n    this.pluginsActionListModel =\n      this.#mapPluginDataToActionListModel(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!: (text: string) => Promise<PluginData[]>;\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  #mapPluginDataToActionListModel = (\n    pluginsData: PluginData[]\n  ): ActionListModel => {\n    const pluginsActionListModel: ActionListModel = [];\n    const separatorItem: ActionListItemSeparator = { type: \"separator\" };\n\n    pluginsData?.forEach((pluginData, index) => {\n      const hasActionButton = !!pluginData.action;\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          \"block-end\": {\n            start: [\n              {\n                part: \"custom-description custom-button custom-container custom-brand custom-brand-icon custom-image item__block-end start\",\n                jsx: () => (\n                  <div part=\"custom-container\" title={pluginData.description}>\n                    <p part=\"custom-description\">{pluginData.description}</p>\n                    <small part=\"custom-brand\">{pluginData.publisher}</small>\n                  </div>\n                )\n              }\n              // {\n              //   slot: \"abcd\"\n              // } as ActionListItemAdditionalSlot // slot not working\n            ]\n          },\n          \"stretch-end\": hasActionButton && {\n            center: [\n              {\n                jsx: () => (\n                  <button\n                    part=\"custom-button\"\n                    onClick={this.#actionListButtonClickHandler(\n                      pluginData.id,\n                      pluginData.action\n                    )}\n                  >\n                    {pluginData.action}\n                  </button>\n                )\n              }\n            ]\n          }\n        }\n      } as ActionListItemModel;\n      if (index !== 0) {\n        pluginsActionListModel.push(separatorItem);\n      }\n      pluginsActionListModel.push(pluginItem);\n    });\n\n    return pluginsActionListModel;\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          ></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 PluginData = {\n  id: string;\n  iconUrl: string;\n  name: string;\n  description: string;\n  publisher: string;\n  action?: PluginAction;\n};\n\nexport type PluginAction = \"install\" | \"update\";\n"],"version":3}
+{"file":"gx-ide-plugin-explorer.entry.js","mappings":"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","names":[],"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"],"version":3}