@genexus/genexus-ide-ui 3.2.21 → 3.2.22

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

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

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

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

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

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

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

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

package/dist/types/components.d.ts

@@ -56,8 +56,8 @@ import { CancelCallback as CancelCallback15, CreateCallback as CreateCallback2,
 import { NewVersionData } from "./components/new-version/new-version";
 import { CancelCallback as CancelCallback16, LoadCallback as LoadCallback2, NewObjectCallback, OpenSelectionCallback, SelectModuleCallback as SelectModuleCallback4 } from "./components/object-selector/object-selector";
 import { CancelCallback as CancelCallback17, ImportCallback as ImportCallback1, LoadCallback as LoadCallback3, SelectParentCallback } from "./components/open-api-import/open-api-import";
-import { PluginDetailsData } from "./components/plugin-details/plugin-details";
-import { PluginAction, PluginData } from "./components/plugin-explorer/plugin-explorer";
+import { PluginDetailsData, PluginInstallProgress } from "./components/plugin-details/plugin-details";
+import { PluginAction, PluginGroupData } from "./components/plugin-explorer/plugin-explorer";
 import { TopStateBarType } from "./components/_helpers/progress-bar/progress-bar";
 import { LoadReferencesCallback, ObjectData as ObjectData1, OpenObjectCallback, OpenSelectorDialogCallback, SelectorSourceCallback, SelectReferenceCallback } from "./components/references/references";
 import { RestoreVersionData } from "./components/restore-version/restore-version";
@@ -136,8 +136,8 @@ export { CancelCallback as CancelCallback15, CreateCallback as CreateCallback2,
 export { NewVersionData } from "./components/new-version/new-version";
 export { CancelCallback as CancelCallback16, LoadCallback as LoadCallback2, NewObjectCallback, OpenSelectionCallback, SelectModuleCallback as SelectModuleCallback4 } from "./components/object-selector/object-selector";
 export { CancelCallback as CancelCallback17, ImportCallback as ImportCallback1, LoadCallback as LoadCallback3, SelectParentCallback } from "./components/open-api-import/open-api-import";
-export { PluginDetailsData } from "./components/plugin-details/plugin-details";
-export { PluginAction, PluginData } from "./components/plugin-explorer/plugin-explorer";
+export { PluginDetailsData, PluginInstallProgress } from "./components/plugin-details/plugin-details";
+export { PluginAction, PluginGroupData } from "./components/plugin-explorer/plugin-explorer";
 export { TopStateBarType } from "./components/_helpers/progress-bar/progress-bar";
 export { LoadReferencesCallback, ObjectData as ObjectData1, OpenObjectCallback, OpenSelectorDialogCallback, SelectorSourceCallback, SelectReferenceCallback } from "./components/references/references";
 export { RestoreVersionData } from "./components/restore-version/restore-version";
@@ -1975,14 +1975,22 @@ export namespace Components {
         "suspendShortcuts": (suspendShortcuts: boolean) => Promise<void>;
     }
     interface GxIdePluginDetails {
+        /**
+          * Callback that should be invoked when the user cancels an in-progress install/update from the progress bar.
+         */
+        "cancelCallback": () => Promise<void>;
         /**
           * Specifies all the information related to a plugin.
          */
         "data": PluginDetailsData;
         /**
-          * Callback that should be invoked when the user performs the install or update action. Receives an optional version string when a specific version is selected.
+          * Callback that should be invoked when the user performs the install or update action. Receives the ordinal versionId of the selected version (undefined installs the latest).
+         */
+        "installCallback": (versionId?: number) => Promise<void>;
+        /**
+          * When set, the component is installing this plugin and shows a determinate progress bar instead of the action button.
          */
-        "installCallback": (version?: string) => Promise<void>;
+        "installProgress"?: PluginInstallProgress;
         /**
           * Callback that should be invoked when the user attempts to open any link displayed in this component.
          */
@@ -2003,11 +2011,13 @@ export namespace Components {
         /**
           * Callback that should be invoked when the user updates the filter. A debounce should be applied before invoking this function.
          */
-        "filterCallback": (text: string) => Promise<PluginData[]>;
+        "filterCallback": (
+    text: string
+  ) => Promise<PluginGroupData[]>;
         /**
-          * List of plugins to display. Usually used to initialize the component.
+          * List of plugin groups to display. Each group is rendered as a native action-list group (with a separator between groups) and its header caption includes the total number of plugins in the group. Usually used to initialize the component.
          */
-        "plugins": PluginData[];
+        "plugins": PluginGroupData[];
         /**
           * Callback that should be invoked when the user clicks or presses Enter on a selected plugin item.
          */
@@ -5983,14 +5993,22 @@ declare namespace LocalJSX {
         "selectParentCallback"?: SelectParentCallback;
     }
     interface GxIdePluginDetails {
+        /**
+          * Callback that should be invoked when the user cancels an in-progress install/update from the progress bar.
+         */
+        "cancelCallback": () => Promise<void>;
         /**
           * Specifies all the information related to a plugin.
          */
         "data": PluginDetailsData;
         /**
-          * Callback that should be invoked when the user performs the install or update action. Receives an optional version string when a specific version is selected.
+          * Callback that should be invoked when the user performs the install or update action. Receives the ordinal versionId of the selected version (undefined installs the latest).
+         */
+        "installCallback": (versionId?: number) => Promise<void>;
+        /**
+          * When set, the component is installing this plugin and shows a determinate progress bar instead of the action button.
          */
-        "installCallback": (version?: string) => Promise<void>;
+        "installProgress"?: PluginInstallProgress;
         /**
           * Callback that should be invoked when the user attempts to open any link displayed in this component.
          */
@@ -6011,11 +6029,13 @@ declare namespace LocalJSX {
         /**
           * Callback that should be invoked when the user updates the filter. A debounce should be applied before invoking this function.
          */
-        "filterCallback": (text: string) => Promise<PluginData[]>;
+        "filterCallback": (
+    text: string
+  ) => Promise<PluginGroupData[]>;
         /**
-          * List of plugins to display. Usually used to initialize the component.
+          * List of plugin groups to display. Each group is rendered as a native action-list group (with a separator between groups) and its header caption includes the total number of plugins in the group. Usually used to initialize the component.
          */
-        "plugins"?: PluginData[];
+        "plugins"?: PluginGroupData[];
         /**
           * Callback that should be invoked when the user clicks or presses Enter on a selected plugin item.
          */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "3.2.21",
+  "version": "3.2.22",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",