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

import { g as s } 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 a } 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)}.list-box::part(custom-container){display:flex;flex-direction:column;gap:var(--spacing-gap-xs);width:100%}.list-box::part(custom-image){block-size:32px;inline-size:32px;margin-inline-end:12px}.list-box::part(custom-description){font-size:var(--font-size-body-s);margin:0;opacity:0.8;line-height:var(--line-height-relaxed);margin-inline-end:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-box::part(item__block-end start){width:100%;min-width:100%}.list-box::part(custom-brand){font-weight:var(--font-style-semi-bold);display:flex;gap:var(--spacing-gap-xs);align-items:center}.list-box::part(custom-brand-icon){--icon-path:var(--icon__system_user_neutral--enabled);display:inline-block;background-image:var(--icon-path);background-size:contain;background-repeat:no-repeat;background-position:center center;block-size:16px;inline-size:16px}.list-box::part(custom-button){--button-color:var(--color-text-primary-default);--button-color--enabled:var(--color-text-neutral-on-text);--button-color--active:var(--color-text-neutral-on-pressed);display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;padding-block:var(--control-padding-block);padding-inline:var(--control-padding-inline);box-sizing:border-box;color:var(--button-color);font-weight:var(--font-style-semi-bold);margin-block-end:auto;margin-block-start:auto;text-transform:capitalize}.list-box::part(custom-button):hover{--button-color:var(--color-text-primary-hover)}.list-box::part(custom-button):active{--button-color:var(--color-text-primary-pressed)}";

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

var p, u, h, m, g, b, f, x;

const v = s({
  category: "system",
  name: "filters",
  colorType: "on-surface"
});

// plugin icon if no iconUrl was provided
const w = t(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);

const y = [ "resets/box-sizing", "components/list-box", "components/button", "components/edit", "utils/form", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];

const k = class {
  constructor(t) {
    e(this, t);
    /**
         * The component hard-coded strings translations.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        p.set(this, void 0);
    u.set(this, false);
    h.set(this, ((t, e) => i => {
      i.stopPropagation();
      this.executeActionCallback(t, e);
    }));
    m.set(this, (t => {
      const e = [];
      const o = {
        type: "separator"
      };
      t === null || t === void 0 ? void 0 : t.forEach(((t, n) => {
        const s = !!t.action;
        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 || w,
                  alt: `${l(this, p, "f").logotype.replace("PLUGIN_NAME_PLACEHOLDER", t.name)}`,
                  loading: "lazy"
                })
              } ]
            },
            "block-end": {
              start: [ {
                part: "custom-description custom-button custom-container custom-brand custom-brand-icon custom-image item__block-end start",
                jsx: () => i("div", {
                  part: "custom-container",
                  title: t.description
                }, i("p", {
                  part: "custom-description"
                }, t.description), i("small", {
                  part: "custom-brand"
                }, t.publisher))
                // {
                //   slot: "abcd"
                // } as ActionListItemAdditionalSlot // slot not working
                            } ]
            },
            "stretch-end": s && {
              center: [ {
                jsx: () => i("button", {
                  part: "custom-button",
                  onClick: l(this, h, "f").call(this, t.id, t.action)
                }, t.action)
              } ]
            }
          }
        };
        if (n !== 0) {
          e.push(o);
        }
        e.push(r);
      }));
      return e;
    }));
    g.set(this, (async t => {
      this.loading = true;
      const e = t.detail;
      this.plugins = await this.filterCallback(e);
    }));
    b.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, x, "f")
      }) : i("gx-ide-empty-state", {
        isAnimated: l(this, u, "f"),
        class: "recent-objects__empty-state",
        stateIconSrc: v,
        stateTitle: l(this, p, "f").emptyStateTitle,
        stateDescription: l(this, p, "f").emptyStateDescription
      });
    }));
    f.set(this, (() => {
      d(this, u, true, "f");
      return i("gx-ide-loader", {
        loaderTitle: l(this, p, "f").loaderTitle,
        description: l(this, p, "f").loaderDescription,
        show: true
      });
    }));
    x.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, m, "f").call(this, t);
    this.loading = false;
  }
  async componentWillLoad() {
    d(this, p, await r.getComponentStrings(this.el), "f");
    this.pluginsChangedHandler(this.plugins);
  }
  render() {
    return i(o, {
      class: "widget"
    }, i("ch-theme", {
      model: y
    }), i("div", {
      class: "outer-container field-group"
    }, i("ch-edit", {
      id: "search-plugins-input",
      class: "input",
      accessibleName: l(this, p, "f").accessibleName,
      placeholder: l(this, p, "f").searchInputPlaceholder,
      debounce: a.inputDebounce,
      onInput: l(this, g, "f"),
      type: "search"
    }), i("div", {
      class: "inner-container"
    }, this.loading ? l(this, f, "f").call(this) : l(this, b, "f").call(this))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/plugin-explorer" ];
  }
  get el() {
    return n(this);
  }
  static get watchers() {
    return {
      plugins: [ "pluginsChangedHandler" ]
    };
  }
};

p = new WeakMap, u = new WeakMap, h = new WeakMap, m = new WeakMap, g = new WeakMap, 
b = new WeakMap, f = new WeakMap, x = new WeakMap;

k.style = c;

export { k as gx_ide_plugin_explorer };
//# sourceMappingURL=p-fc0bc991.entry.js.map