@genexus/genexus-ide-ui 1.1.22 → 1.1.23

package/dist/genexus-ide-ui/{p-84c1c1bb.entry.js → p-75c1634c.entry.js}

@@ -19,32 +19,32 @@ var c = undefined && undefined.__classPrivateFieldSet || function(i, e, t, s, a)
   return s === "a" ? a.call(i, t) : a ? a.value = t : e.set(i, t), t;
 };
 
-var d, p, h, m, f, u, _, g, b, v, x, w, y, k;
+var d, p, h, f, m, u, _, g, b, v, w, x, y, k, M, W;
 
-const M = n({
+const T = n({
   category: "system",
   name: "user",
   colorType: "on-elevation"
 });
 
-const W = n({
+const z = n({
   category: "system",
   name: "chevron-down",
   colorType: "on-primary"
 });
 
-const T = n({
+const C = n({
   category: "system",
   name: "check-circle",
   colorType: "success"
 });
 
 // plugin icon if no iconUri was provided
-const z = i(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);
+const E = i(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);
 
-const C = [ "resets/box-sizing", "chameleon/scrollbar", "components/button", "components/dropdown", "components/edit", "components/icon", "components/list-box", "components/tab", "utils/form", "utils/layout", "utils/spacing", "utils/typography" ];
+const j = [ "resets/box-sizing", "chameleon/scrollbar", "components/button", "components/dropdown", "components/edit", "components/icon", "components/list-box", "components/tab", "utils/form", "utils/layout", "utils/spacing", "utils/typography" ];
 
-const j = class {
+const L = class {
   constructor(i) {
     e(this, i);
     /**
@@ -52,10 +52,11 @@ const j = class {
          */
     // eslint-disable-next-line @stencil-community/own-props-must-be-private
         d.set(this, void 0);
+    p.set(this, void 0);
     // A map between docSection "id", and docSection "description".
     // "id" is generated inside this component.
-        p.set(this, new Map);
-    h.set(this, (() => {
+        h.set(this, new Map);
+    f.set(this, (() => {
       var i;
       const e = (i = this.data.versions) === null || i === void 0 ? void 0 : i.map((i => ({
         id: i,
@@ -67,24 +68,26 @@ const j = class {
       const e = i.detail.id;
       this.installCallback(e);
     }));
-    f.set(this, (() => t("button", {
+    u.set(this, (() => t("button", {
       class: "button-tertiary",
-      onClick: l(this, b, "f")
+      onClick: l(this, v, "f")
     }, l(this, d, "f").actions.uninstall)));
-    u.set(this, (() => {
+    _.set(this, (() => {
       this.installCallback();
     }));
-    _.set(this, (i => () => {
+    g.set(this, (i => () => {
       this.installCallback(i);
     }));
-    g.set(this, (i => e => {
-      e.preventDefault();
-      this.openLinkCallback(i);
+    b.set(this, (i => e => {
+      if (this.openLinkCallback) {
+        e.preventDefault();
+        this.openLinkCallback(i);
+      }
     }));
-    b.set(this, (() => {
+    v.set(this, (() => {
       this.uninstallCallback();
     }));
-    v.set(this, (() => {
+    w.set(this, (() => {
       var i;
       let e;
       let s = "button-primary action-button";
@@ -92,10 +95,10 @@ const j = class {
       const n = (i = this.data.versions) === null || i === void 0 ? void 0 : i.length;
       if (!this.data.installed) {
         e = l(this, d, "f").actions.install;
-        a = l(this, u, "f");
+        a = l(this, _, "f");
       } else if (this.data.updateVersion) {
         e = `${l(this, d, "f").actions.updateTo} ${this.data.updateVersion}`;
-        a = l(this, _, "f").call(this, this.data.updateVersion);
+        a = l(this, g, "f").call(this, this.data.updateVersion);
       } else {
         e = l(this, d, "f").actions.installed;
       }
@@ -111,20 +114,21 @@ const j = class {
         class: "dropdown button-primary button-icon-only",
         blockAlign: "outside-end",
         inlineAlign: "inside-start",
-        model: l(this, h, "f").call(this),
+        model: l(this, f, "f").call(this),
         onButtonClick: l(this, m, "f")
       }, t("ch-image", {
-        src: W,
+        src: z,
         class: "icon-md"
       })) : null) ];
     }));
     x.set(this, (i => {
       this.selectedTabId = i.detail.newSelectedId;
     }));
-    w.set(this, (() => this.docsTabModel.map((i => {
+    y.set(this, (() => this.docsTabModel.map((i => {
       if (i.id === this.selectedTabId) {
-        const e = l(this, p, "f").get(i.id);
+        const e = l(this, h, "f").get(i.id);
         return t("ch-markdown-viewer", {
+          ref: i => c(this, p, i, "f"),
           slot: i.id,
           key: i.id,
           class: "markdown spacing-body scrollable",
@@ -133,8 +137,17 @@ const j = class {
         });
       }
     }))));
-    y.set(this, (i => i.toLowerCase().replace(/\s+/g, "-")));
-    k.set(this, (() => this.data.infoCategories.map((i => t("div", {
+    k.set(this, (i => i.toLowerCase().replace(/\s+/g, "-")));
+    M.set(this, ((i, e, s, a) => t("a", {
+      href: i,
+      target: "_blank",
+      onClick: l(this, b, "f").call(this, i),
+      class: s
+    }, a && t("ch-image", {
+      src: a,
+      class: "icon-md"
+    }), e)));
+    W.set(this, (() => this.data.infoCategories.map((i => t("div", {
       class: "plugin__info-category"
     }, t("h3", {
       class: "subtitle-semi-bold-s"
@@ -145,10 +158,7 @@ const j = class {
       }
     }, i.fields.map((e => {
       // If the field name isn’t specified, only the value is shown — usually a link.
-      const s = typeof e.value === "string" ? e.value : t("a", {
-        class: "field__link",
-        onClick: l(this, g, "f").call(this, e.value.url)
-      }, e.value.text);
+      const s = typeof e.value === "string" ? e.value : l(this, M, "f").call(this, e.value.url, e.value.text, "field__link");
       return t("li", {
         class: "field__li"
       }, e.name && !i.displayAsTags ? // displaysAsTags forces the items to be displayed as tags
@@ -171,8 +181,8 @@ const j = class {
     c(this, d, await o.getComponentStrings(this.el), "f");
     if ((i = this.data.docSections) === null || i === void 0 ? void 0 : i.length) {
       this.docsTabModel = this.data.docSections.map(((i, e) => {
-        const t = l(this, y, "f").call(this, i.name);
-        l(this, p, "f").set(t, i.content);
+        const t = l(this, k, "f").call(this, i.name);
+        l(this, h, "f").set(t, i.content);
         if (e === 0) {
           this.selectedTabId = t;
         }
@@ -183,6 +193,19 @@ const j = class {
       }));
     }
   }
+  componentDidLoad() {
+    l(this, p, "f").addEventListener("click", (i => {
+      // 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
+      // to this.#openLinkHandler, passing the link's href.
+      const e = i.composedPath();
+      const t = e.find((i => i instanceof HTMLAnchorElement));
+      if (t === null || t === void 0 ? void 0 : t.href) {
+        l(this, b, "f").call(this, t.href)(i);
+      }
+    }));
+  }
   render() {
     const i = !this.data.installed || this.data.installed && !!this.data.updateVersion;
     const e = this.data.name.text;
@@ -196,49 +219,38 @@ const j = class {
     return t(s, {
       class: "widget"
     }, t("ch-theme", {
-      model: C
+      model: j
     }), t("section", {
       class: "section"
     }, t("header", {
       class: "header"
     }, t("img", {
       class: "plugin__icon",
-      src: this.data.iconUrl || z,
+      src: this.data.iconUrl || E,
       alt: "plugin extension icon"
     }), t("div", {
       class: "plugin__details"
     }, n ? t("h2", {
+      class: "heading-5 has-link"
+    }, l(this, M, "f").call(this, a, o, "text-underline")) : t("h2", {
       class: "heading-5"
-    }, t("a", {
-      href: a,
-      onClick: l(this, g, "f").call(this, a),
-      class: "text-underline"
-    }, o)) : t("h2", {
-      class: "heading-5"
-    }, o), p ? t("a", {
-      href: c,
-      onClick: l(this, g, "f").call(this, c),
-      class: "text-underline plugin__publisher tiny-semi-bold-l"
-    }, t("ch-image", {
-      src: M,
-      class: "icon-md"
-    }), h) : t("p", {
+    }, o), p ? l(this, M, "f").call(this, c, o, "text-underline plugin__publisher tiny-semi-bold-l", T) : t("p", {
       class: "plugin__publisher tiny-semi-bold-l"
     }, t("ch-image", {
-      src: M,
+      src: T,
       class: "icon-md"
     }), h), t("p", {
       class: "plugin__description"
     }, this.data.description), t("div", {
       class: "buttons-spacer plugin__actions-container"
-    }, i ? l(this, v, "f").call(this) : 
+    }, i ? l(this, w, "f").call(this) : 
     // installed and no updates
     t("p", {
       class: "installed-container subtitle-semi-bold-s"
     }, t("ch-image", {
-      src: T,
+      src: C,
       class: "icon-md"
-    }), l(this, d, "f").actions.installed), this.data.installed && l(this, f, "f").call(this)))), t("div", {
+    }), l(this, d, "f").actions.installed), this.data.installed && l(this, u, "f").call(this)))), t("div", {
       class: "main"
     }, this.docsTabModel.length > 0 && t("ch-tab-render", {
       class: "tab docsTab scrollable",
@@ -248,9 +260,9 @@ const j = class {
       model: this.docsTabModel,
       onSelectedItemChange: l(this, x, "f"),
       selectedId: this.selectedTabId
-    }, l(this, w, "f").call(this))), t("div", {
+    }, l(this, y, "f").call(this))), t("div", {
       class: "aside spacing-body scrollable"
-    }, l(this, k, "f").call(this))));
+    }, l(this, W, "f").call(this))));
   }
   static get assetsDirs() {
     return [ "gx-ide-assets/plugin-details" ];
@@ -260,11 +272,12 @@ const j = class {
   }
 };
 
-d = new WeakMap, p = new WeakMap, h = new WeakMap, m = new WeakMap, f = new WeakMap, 
+d = new WeakMap, p = new WeakMap, h = new WeakMap, f = new WeakMap, m = new WeakMap, 
 u = new WeakMap, _ = new WeakMap, g = new WeakMap, b = new WeakMap, v = new WeakMap, 
-x = new WeakMap, w = new WeakMap, y = new WeakMap, k = new WeakMap;
+w = new WeakMap, x = new WeakMap, y = new WeakMap, k = new WeakMap, M = new WeakMap, 
+W = new WeakMap;
 
-j.style = r;
+L.style = r;
 
-export { j as gx_ide_plugin_details };
-//# sourceMappingURL=p-84c1c1bb.entry.js.map
+export { L as gx_ide_plugin_details };
+//# sourceMappingURL=p-75c1634c.entry.js.map

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

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

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

@@ -22,6 +22,7 @@ export declare class GxIdePluginDetails {
      */
     readonly uninstallCallback: () => Promise<void>;
     componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
     render(): any;
 }
 export type LinkData = {

package/package.json

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

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

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