import { g as i, r as t, h as s, H as e, a } from "./p-9b9ccd0c.js";

import { g as n } from "./p-d42e842b.js";

import "./p-6534555e.js";

import "lit";

import "lit/directives/when.js";

import "lit/directives/if-defined.js";

import { L as o } from "./p-311eedf3.js";

const r = 'ch-tab-render.tab{background-color:transparent;border-color:transparent}ch-tab-render.tab::part(tab-list block-start){border-block-end:none}ch-tab-render.tab::part(tab block closable),ch-tab-render.tab::part(tab block not-closable){background-color:transparent}:host{display:grid;block-size:100%;grid-template-areas:"header header" "main aside";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:var(--spacing-gap-l)}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:"plugin-icon plugin-details";grid-template-columns:64px 1fr;column-gap:var(--spacing-gap-xl);padding-block-start:var(--spacing-padding-xxl);padding-block-end:var(--spacing-padding-xl);padding-inline:var(--spacing-padding-xxl)}.plugin__icon{grid-area:plugin-icon;inline-size:100%;block-size:auto;display:block}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.plugin__publisher{display:flex;align-items:center;gap:var(--spacing-gap-xs)}.plugin__description{line-height:var(--line-height-spacious)}.plugin__actions-container{margin-block-start:var(--spacing-padding-m);align-items:center}.action-button{min-inline-size:100px}.action-button.more-versions-available{border-start-end-radius:0 !important;border-end-end-radius:0 !important}.installed-container{display:flex;align-items:center;gap:var(--spacing-gap-m)}.installed-container ch-image{--ch-image-size:20px}.main{grid-area:main}.docsTab{block-size:100%}.aside{grid-area:aside;overflow:auto;border-block-start:1px solid var(--items-container__border-color)}.fields__list{list-style:none;padding:0;margin:0;font-size:var(--font-size-body-s)}.plugin__info-category{display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.plugin__info-category:not(:first-child){padding-block-start:var(--spacing-padding-xl);margin-block-start:var(--spacing-padding-xl);border-block-start:1px solid var(--color-border-surface-on-elevation-1)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:var(--spacing-gap-xl)}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-gap-m)}.fields__list--as-tags .field__li{border:1px solid var(--color-border-surface-on-elevation-1);padding-block:var(--spacing-padding-xxs);padding-inline:var(--spacing-padding-m);border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--color-text-neutral-strawberry)}.fields__list--as-tags .field__link:hover{color:var(--color-accent-primary-default)}.fields__list--as-tags .field__link:active{color:var(--color-accent-primary-hover)}.field__name,.field__value{flex:1}.field__link{color:var(--color-accent-primary-default)}.field__link:hover{color:var(--color-accent-primary-hover)}.field__link:active{color:var(--color-accent-primary-pressed)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( (var(--control-block-size) - 2 * var(--control-border-width) - 16px) / 2 ) !important;border-start-start-radius:0 !important;border-end-start-radius:0 !important}.version-buttons-container{display:flex;align-items:center;gap:1px}ch-markdown-viewer{block-size:100%;overflow:auto}.text-underline{text-decoration:underline}';

var l = undefined && undefined.__classPrivateFieldGet || function(i, t, s, e) {
  if (s === "a" && !e) throw new TypeError("Private accessor was defined without a getter");
  if (typeof t === "function" ? i !== t || !e : !t.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return s === "m" ? e : s === "a" ? e.call(i) : e ? e.value : t.get(i);
};

var c = undefined && undefined.__classPrivateFieldSet || function(i, t, s, e, a) {
  if (e === "m") throw new TypeError("Private method is not writable");
  if (e === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
  if (typeof t === "function" ? i !== t || !a : !t.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return e === "a" ? a.call(i, s) : a ? a.value = s : t.set(i, s), s;
};

var d, p, h, g, f, u, m, b, _, v, k, w, y, x, M, W;

const z = n({
  category: "system",
  name: "user",
  colorType: "on-surface"
});

const T = n({
  category: "system",
  name: "chevron-down",
  colorType: "on-primary"
});

const j = n({
  category: "system",
  name: "check-circle",
  colorType: "success"
});

// plugin icon if no iconUri was provided
const C = i(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);

const E = [ "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 L = class {
  constructor(i) {
    t(this, i);
    /**
         * The component hard-coded strings translations.
         */
    // 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.
        h.set(this, new Map);
    g.set(this, (() => {
      var i;
      const t = (i = this.data.versions) === null || i === void 0 ? void 0 : i.map((i => ({
        id: i,
        caption: i
      })));
      return t;
    }));
    f.set(this, (i => {
      const t = i.detail.id;
      this.installCallback(t);
    }));
    u.set(this, (() => s("button", {
      class: "button-tertiary",
      onClick: l(this, v, "f")
    }, l(this, d, "f").actions.uninstall)));
    m.set(this, (() => {
      this.installCallback();
    }));
    b.set(this, (i => () => {
      this.installCallback(i);
    }));
    _.set(this, (i => t => {
      if (this.openLinkCallback) {
        t.preventDefault();
        this.openLinkCallback(i);
      }
    }));
    v.set(this, (() => {
      this.uninstallCallback();
    }));
    k.set(this, (() => {
      var i;
      let t;
      let e = "button-primary action-button";
      let a;
      const n = (i = this.data.versions) === null || i === void 0 ? void 0 : i.length;
      if (!this.data.installed) {
        t = l(this, d, "f").actions.install;
        a = l(this, m, "f");
      } else if (this.data.updateVersion) {
        t = `${l(this, d, "f").actions.updateTo} ${this.data.updateVersion}`;
        a = l(this, b, "f").call(this, this.data.updateVersion);
      } else {
        t = l(this, d, "f").actions.installed;
      }
      if (n) {
        e = `${e} more-versions-available`;
      }
      return [ s("div", {
        class: "version-buttons-container"
      }, s("button", {
        class: e,
        onClick: a
      }, t), n ? s("ch-action-menu-render", {
        class: "dropdown button-primary button-icon-only",
        blockAlign: "outside-end",
        inlineAlign: "inside-start",
        model: l(this, g, "f").call(this),
        onButtonClick: l(this, f, "f")
      }, s("ch-image", {
        src: T,
        class: "icon-m"
      })) : null) ];
    }));
    w.set(this, (i => {
      this.selectedTabId = i.detail.newSelectedId;
    }));
    y.set(this, (() => this.docsTabModel.map((i => {
      if (i.id === this.selectedTabId) {
        const t = l(this, h, "f").get(i.id);
        return s("ch-markdown-viewer", {
          ref: i => c(this, p, i, "f"),
          slot: i.id,
          key: i.id,
          class: "markdown spacing-body scrollable",
          theme: "components/markdown-viewer",
          value: t
        });
      }
    }))));
    x.set(this, (i => i.toLowerCase().replace(/\s+/g, "-")));
    M.set(this, ((i, t, e, a) => s("a", {
      href: i,
      target: "_blank",
      onClick: l(this, _, "f").call(this, i),
      class: e
    }, a && s("ch-image", {
      src: a,
      class: "icon-m"
    }), t)));
    W.set(this, (() => this.data.infoCategories.map((i => s("div", {
      class: "plugin__info-category"
    }, s("h3", {
      class: "subtitle-semi-bold-s"
    }, i.name), s("ul", {
      class: {
        fields__list: true,
        "fields__list--as-tags": i.displayAsTags
      }
    }, i.fields.map((t => {
      // If the field name isn’t specified, only the value is shown — usually a link.
      const e = typeof t.value === "string" ? t.value : l(this, M, "f").call(this, t.value.url, t.value.text, "field__link");
      return s("li", {
        class: "field__li"
      }, t.name && !i.displayAsTags ? // displaysAsTags forces the items to be displayed as tags
      // no span.field__name and span.field__value
      [ s("span", {
        class: "field__name body-semi-bold-s"
      }, t.name), s("span", {
        class: "field__value body-regular-s"
      }, e) ] : e);
    }))))))));
    this.docsTabModel = [];
    this.selectedTabId = undefined;
    this.data = undefined;
    this.installCallback = undefined;
    this.openLinkCallback = undefined;
    this.uninstallCallback = undefined;
  }
  async componentWillLoad() {
    var i;
    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, t) => {
        const s = l(this, x, "f").call(this, i.name);
        l(this, h, "f").set(s, i.content);
        if (t === 0) {
          this.selectedTabId = s;
        }
        return {
          id: s,
          name: i.name
        };
      }));
    }
  }
  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 t = i.composedPath();
      const s = t.find((i => i instanceof HTMLAnchorElement));
      if (s === null || s === void 0 ? void 0 : s.href) {
        l(this, _, "f").call(this, s.href)(i);
      }
    }));
  }
  render() {
    const i = !this.data.installed || this.data.installed && !!this.data.updateVersion;
    const t = this.data.name.text;
    const a = this.data.name.url;
    const n = t && a;
    const o = t || this.data.name;
    const r = this.data.publisher.text;
    const c = this.data.publisher.url;
    const p = r && c;
    const h = r || this.data.publisher;
    return s(e, {
      class: "widget"
    }, s("ch-theme", {
      model: E
    }), s("section", {
      class: "section"
    }, s("header", {
      class: "header"
    }, s("img", {
      class: "plugin__icon",
      src: this.data.iconUrl || C,
      alt: "plugin extension icon"
    }), s("div", {
      class: "plugin__details"
    }, n ? s("h2", {
      class: "heading-5 has-link"
    }, l(this, M, "f").call(this, a, o, "text-underline")) : s("h2", {
      class: "heading-5"
    }, o), p ? l(this, M, "f").call(this, c, o, "text-underline plugin__publisher caption-semi-bold-l", z) : s("p", {
      class: "plugin__publisher caption-semi-bold-l"
    }, s("ch-image", {
      src: z,
      class: "icon-s"
    }), h), s("p", {
      class: "plugin__description"
    }, this.data.description), s("div", {
      class: "buttons-spacer plugin__actions-container"
    }, i ? l(this, k, "f").call(this) : 
    // installed and no updates
    s("p", {
      class: "installed-container subtitle-semi-bold-s"
    }, s("ch-image", {
      src: j,
      class: "icon-s"
    }), l(this, d, "f").actions.installed), this.data.installed && l(this, u, "f").call(this)))), s("div", {
      class: "main"
    }, this.docsTabModel.length > 0 && s("ch-tab-render", {
      class: "tab docsTab scrollable",
      tabListPosition: "block-start",
      overflow: "auto",
      contain: "size",
      model: this.docsTabModel,
      onSelectedItemChange: l(this, w, "f"),
      selectedId: this.selectedTabId
    }, l(this, y, "f").call(this))), s("div", {
      class: "aside spacing-body scrollable"
    }, l(this, W, "f").call(this))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/plugin-details" ];
  }
  get el() {
    return a(this);
  }
};

d = new WeakMap, p = new WeakMap, h = new WeakMap, g = new WeakMap, f = new WeakMap, 
u = new WeakMap, m = new WeakMap, b = new WeakMap, _ = new WeakMap, v = new WeakMap, 
k = new WeakMap, w = new WeakMap, y = new WeakMap, x = new WeakMap, M = new WeakMap, 
W = new WeakMap;

L.style = r;

export { L as gx_ide_plugin_details };
//# sourceMappingURL=p-514445ac.entry.js.map