npm - @genexus/genexus-ide-ui - Versions diffs - 3.2.21 → 3.2.22 - Mend

@genexus/genexus-ide-ui 3.2.21 → 3.2.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/dist/components/gx-ide-plugin-details.js CHANGED Viewed

@@ -4,8 +4,9 @@ import 'lit';
 import 'lit/directives/when.js';
 import 'lit/directives/if-defined.js';
 import { L as Locale } from './locale.js';
+import { d as defineCustomElement$2 } from './progress-bar.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)
@@ -23,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",
@@ -72,22 +73,22 @@ const GxIdePluginDetails$1 = /*@__PURE__*/ proxyCustomElement(class GxIdePluginD
         _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) {
@@ -98,19 +99,33 @@ const GxIdePluginDetails$1 = /*@__PURE__*/ proxyCustomElement(class GxIdePluginD
         _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;
@@ -164,6 +179,8 @@ const GxIdePluginDetails$1 = /*@__PURE__*/ proxyCustomElement(class GxIdePluginD
         this.selectedTabId = undefined;
         this.data = undefined;
         this.installCallback = undefined;
+        this.installProgress = undefined;
+        this.cancelCallback = undefined;
         this.openLinkCallback = undefined;
         this.uninstallCallback = undefined;
     }
@@ -185,7 +202,9 @@ const GxIdePluginDetails$1 = /*@__PURE__*/ proxyCustomElement(class GxIdePluginD
         }
     }
     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
@@ -218,23 +237,30 @@ const GxIdePluginDetails$1 = /*@__PURE__*/ proxyCustomElement(class GxIdePluginD
 }, [1, "gx-ide-plugin-details", {
         "data": [16],
         "installCallback": [16],
+        "installProgress": [16],
+        "cancelCallback": [16],
         "openLinkCallback": [16],
         "uninstallCallback": [16],
         "docsTabModel": [32],
         "selectedTabId": [32]
     }]);
-_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();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-plugin-details"];
+    const components = ["gx-ide-plugin-details", "gx-ide-progress-bar"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-plugin-details":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, GxIdePluginDetails$1);
             }
             break;
+        case "gx-ide-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }

package/dist/components/gx-ide-plugin-details.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-plugin-details.js","mappings":"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","names":["GxIdePluginDetails"],"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}
1	+ {"file":"gx-ide-plugin-details.js","mappings":"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","names":["GxIdePluginDetails"],"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/components/gx-ide-plugin-explorer.js CHANGED Viewed

@@ -5,10 +5,11 @@ import 'lit/directives/when.js';
 import 'lit/directives/if-defined.js';
 import { L as Locale } from './locale.js';
 import { c as config } from './config.js';
-import { d as defineCustomElement$3 } from './gx-ide-empty-state2.js';
-import { d as defineCustomElement$2 } from './ide-loader.js';
+import { d as defineCustomElement$4 } from './gx-ide-empty-state2.js';
+import { d as defineCustomElement$3 } from './ide-loader.js';
+import { d as defineCustomElement$2 } from './progress-bar.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)
@@ -26,14 +27,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",
@@ -45,6 +46,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 = /*@__PURE__*/ proxyCustomElement(class GxIdePluginManager extends HTMLElement {
     constructor() {
         super();
@@ -60,51 +76,85 @@ const GxIdePluginManager = /*@__PURE__*/ proxyCustomElement(class GxIdePluginMan
             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;
@@ -136,7 +186,7 @@ const GxIdePluginManager = /*@__PURE__*/ proxyCustomElement(class GxIdePluginMan
     }
     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() {
@@ -144,7 +194,7 @@ const GxIdePluginManager = /*@__PURE__*/ proxyCustomElement(class GxIdePluginMan
         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)))));
     }
@@ -164,12 +214,12 @@ const GxIdePluginManager = /*@__PURE__*/ proxyCustomElement(class GxIdePluginMan
     }, undefined, {
         "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();
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["gx-ide-plugin-explorer", "gx-ide-empty-state", "gx-ide-loader"];
+    const components = ["gx-ide-plugin-explorer", "gx-ide-empty-state", "gx-ide-loader", "gx-ide-progress-bar"];
     components.forEach(tagName => { switch (tagName) {
         case "gx-ide-plugin-explorer":
             if (!customElements.get(tagName)) {
@@ -178,10 +228,15 @@ function defineCustomElement$1() {
             break;
         case "gx-ide-empty-state":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "gx-ide-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "gx-ide-progress-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }