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

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

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

import "lit";

import "lit/directives/when.js";

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

import { c as a } from "./p-c5196b3b.js";

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

import { h as n } from "./p-4d330836.js";

const mapModuleServerDataToComboBoxModel = t => t.map((t => ({
  value: t.id,
  caption: t.name
})));

const mapModuleVersionDataToComboBoxModel = t => t.map((t => ({
  value: t.id,
  caption: t.name
})));

const renderModuleDataProperties = e => {
  if (e.length) {
    const s = [];
    e.forEach((e => {
      const i = Array.isArray(e.value);
      if (i && e.value.length) {
        const i = t("div", {
          class: "md-property__list-container"
        }, t("p", {
          class: "md-property__key subtitle-semi-bold-xs"
        }, e.name, " :"), t("ul", {
          class: "md-property__list"
        }, e.value.map((e => t("li", {
          class: "md-property__list-item body-regular-s"
        }, e)))));
        s.push(i);
      } else if (!i) {
        const i = t("div", {
          class: e.inline ? "md-property md-property--inline" : "md-property md-property--block"
        }, t("p", {
          class: "md-property__key subtitle-semi-bold-xs"
        }, e.name, " :"), t("p", {
          class: "md-property__value body-regular-s"
        }, e.value));
        s.push(i);
      }
    }));
    return s;
  }
  return null;
};

const l = '.hiChar{color:var(--color-text-primary-default);filter:brightness(1.3)}:host{display:grid;block-size:100%;overflow:auto;grid-template-areas:"modules-container module-info" "footer footer";grid-template-columns:1fr 1fr;grid-template-rows:1fr max-content}.main{display:contents}.modules__container{padding-inline-end:12px;grid-area:modules-container;grid-template-rows:max-content 1fr;overflow:auto}.combo-box-servers{flex-shrink:0;flex-grow:1}.modules__main{display:grid;grid-template-rows:max-content 1fr;overflow:auto}.modules__main-header{display:grid;gap:8px}.browse-modules button{flex-grow:1}.module-icon{margin-block-start:8px;transform:scale(1) translateX(4px)}.module-grid-item-info{grid-template-columns:max-content 1fr}.grid-or-loader-container{display:grid;position:relative;overflow:hidden;margin-block-start:12px}.tabular-grid{overflow:hidden}.tabular-grid-column-set{display:none}.tabular-grid-cell-icon{pointer-events:none}gx-ide-empty-state{position:absolute}.module-info{padding-inline-start:12px;grid-area:module-info;position:relative}.modules-container,.module-info{overflow:auto}.module-info{display:grid;grid-template-rows:max-content 1fr;overflow:auto}.module-info__action-container{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-gap-m)}.module-info__action-container:before{content:"";inline-size:8px;block-size:8px;border-radius:50%;display:block;background-color:var(--color-icon-neutral-disabled)}.module-info__action-container--installed{color:var(--color-text-success-default)}.module-info__action-container--installed:before{background-color:var(--color-text-success-default)}.module-info__action-container--uninstallable:before{background-color:var(--color-icon-warning-default)}.module-info__header{display:grid;gap:var(--spacing-gap-m)}.module-info__title{display:grid;grid-template-columns:max-content 1fr;align-items:center;gap:var(--spacing-gap-xl)}.module-info__icon{transform:scale(1) translateX(4px)}.module-info__alert-message{padding:var(--spacing-padding-m) var(--spacing-padding-l);border-radius:4px;background-color:var(--color-accent-warning-contrast);color:var(--color-text-neutral-default);border:1px solid var(--color-border-warning-default);text-align:center;line-height:var(--line-height-spacious)}.module-info__properties{display:grid;overflow:auto;grid-auto-rows:max-content}.md-property,.md-property__list-container{padding-block:8px;display:grid;gap:var(--spacing-gap-xs);border-block-end:1px solid var(--elevation-border-color, var(--color-border-surface-on-surface))}.md-property:last-child,.md-property__list-container:last-child{border-block-end:0}.md-property__list{margin:0;list-style-type:none;display:inline-flex;padding:0;gap:var(--spacing-gap-xs);flex-wrap:wrap}.md-property__list-item{background-color:var(--color-accent-surface-elevation-2);padding:2px 8px;border-radius:4px;text-transform:lowercase}.md-property--inline{grid-template-columns:max-content 1fr;align-items:start;gap:var(--spacing-gap-m)}.available-versions .versions{flex:1}.available-versions .button-status{min-inline-size:48px;inline-size:max-content;box-sizing:border-box}.footer{grid-area:footer}p.body-regular-s,li.body-regular-s{line-height:var(--line-height-relaxed)}';

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

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

var h, f, p, m, u, g, b, v, w, y, _, x, k, M, W, $, C, j, T, z, I, S, A, D, E, F, L, P;

const V = [ "resets/box-sizing", "utils/form", "utils/layout", "utils/typography", "components/button", "components/icon", "components/combo-box", "components/edit", "components/tabular-grid", "components/segmented-control", "chameleon/scrollbar", "utils/spacing" ];

// icons
const X = o({
  category: "gemini-tools",
  name: "show-more-horizontal",
  colorType: "primary"
});

const B = o({
  category: "gemini-tools",
  name: "reset",
  colorType: "primary"
});

const H = o({
  category: "objects",
  name: "module"
});

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

const R = "__";

 // The separator between module-id, and module-version-id
const Y = class {
  constructor(s) {
    e(this, s);
    h.set(this, void 0);
    /**
         * #moduleVersionsMap maps a module version (identified as module-id + version-id), with the ModuleVersionData
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        f.set(this, new Map);
    /**
         * maps a module-id, with the module current installed version, and the list of versions as a ComboBoxModel representation.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        p.set(this, new Map);
    // #modulesJustFetched is used to select the current module on componentDidRender
        m.set(this, false);
    u.set(this, void 0);
    g.set(this, void 0);
    b.set(this, void 0);
    v.set(this, []);
    w.set(this, (() => {
      c(this, p, "f").clear();
      c(this, f, "f").clear();
    }));
    y.set(this, (() => {
      let t;
      // 1. Filter by type first
      // browse
            if (this.selectedModuleType === "browse") {
        t = this.modulesAll;
      }
      // installed
       else if (this.selectedModuleType === "installed") {
        t = this.modulesAll.filter((t => t.currentVersion));
      } else if (this.selectedModuleType === "updates") {
        t = this.modulesAll.filter((t => t.versions.find((t => t.action === "update"))));
      }
      // 2. Then filter by user input
            if (c(this, u, "f")) {
        t = t.filter((t => {
          const e = c(this, f, "f").get(`${t.id}${R}${c(this, p, "f").get(t.id).currentSelectedVersion}`);
          const s = e.name.toLowerCase();
          const i = e.description.toLowerCase();
          return (s === null || s === void 0 ? void 0 : s.includes(c(this, u, "f"))) || (i === null || i === void 0 ? void 0 : i.includes(c(this, u, "f")));
        }));
      }
      this.filteredModules = t;
    }));
    _.set(this, (() => {
      const t = c(this, f, "f").get(`${this.selectedModuleId}${R}${c(this, p, "f").get(this.selectedModuleId).currentSelectedVersion}`).action;
      return t || "install";
    }));
    x.set(this, (t => {
      const e = t.detail.trim().toLowerCase();
      d(this, u, e, "f");
      c(this, y, "f").call(this);
    }));
    k.set(this, (t => {
      this.selectedModuleId = t.detail.rowsId[0];
      // update selected versions comboBox model
            const e = c(this, p, "f").get(this.selectedModuleId).comboBoxVersionsModel;
      this.selectedModuleVersions = e.map((t => ({
        caption: t.value,
        value: t.value
      })));
    }));
    /**
         * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        M.set(this, (t => async () => {
      await c(this, b, "f").reset();
 // sets the progress bar to 0
            this.executeActionCallbackInProgress = true;
      this.actionInProgress = true;
      const e = c(this, p, "f").get(this.selectedModuleId).currentSelectedVersion;
      const s = await this.executeActionCallback(this.selectedServerId, t.id, e, c(this, _, "f").call(this), c(this, C, "f"));
      this.executeActionCallbackInProgress = false;
      if (s) {
        c(this, F, "f").call(this, this.selectedServerId, false);
      }
    }));
    W.set(this, (t => {
      this.selectedModuleType = t.detail;
      c(this, y, "f").call(this);
    }));
    $.set(this, (t => {
      const e = t.detail;
      const s = c(this, p, "f").get(this.selectedModuleId);
      s.currentSelectedVersion = e.toString();
      c(this, p, "f").set(this.selectedModuleId, s);
      this.reRenderCounter++;
    }));
    /**
         * Callback invoked to get the progress when module is performing an action
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        C.set(this, ((t, e, s) => {
      const i = {
        message: t,
        progress: e,
        state: s
      };
      this.selectedModuleAction = Object.assign({}, i);
      this.progressValue = this.selectedModuleAction.progress;
      this.progressState = this.selectedModuleAction.state;
    }));
    j.set(this, (() => {}));
    T.set(this, (() => {
      c(this, F, "f").call(this, this.selectedServerId, true);
    }));
    z.set(this, (() => t("gx-ide-empty-state", {
      isAnimated: true,
      stateIconSrc: O,
      stateTitle: c(this, h, "f").modules.noModulesFilter
    })));
    I.set(this, (() => {
      const e = c(this, p, "f").get(this.selectedModuleId).currentInstalledVersion;
      let s;
      let i = "module-info__action-container";
      if (e) {
        s = `${c(this, h, "f").modulesInformation.moduleProperties.installed}: ${e}`;
        i += ` module-info__action-container--installed`;
      } else {
        s = c(this, h, "f").modulesInformation.moduleProperties.notInstalled;
      }
      return t("div", {
        class: i
      }, t("p", {
        class: "body-regular-m"
      }, s));
    }));
    S.set(this, (() => {
      const e = c(this, p, "f").get(this.selectedModuleId);
      const s = e.currentSelectedVersion;
      const i = c(this, f, "f").get(`${this.selectedModuleId}${R}${c(this, p, "f").get(this.selectedModuleId).currentSelectedVersion}`);
      const o = i.action;
      return t("div", {
        class: "field field-block available-versions"
      }, t("label", {
        class: "label",
        htmlFor: "available-versions"
      }, c(this, h, "f").availableVersions), t("div", {
        class: "buttons-spacer combo-and-button"
      }, t("ch-combo-box-render", {
        id: "available-versions",
        class: "combo-box versions",
        value: s,
        onInput: c(this, $, "f"),
        disabled: this.loadingServer,
        model: this.selectedModuleVersions
      }), t("button", {
        class: "button-primary button-status",
        disabled: this.executeActionCallbackInProgress || o === "incompatible" || o === "not-installable",
        onClick: c(this, M, "f").call(this, e.moduleData)
      }, c(this, _, "f").call(this))));
    }));
    A.set(this, (() => t("ch-tabular-grid", {
      // TODO: Evaluate if the tabular-grid is the right tool for this job.
      rowSelectionMode: "single",
      part: "ch-grid-pending-commits",
      class: "tabular-grid scrollable",
      onSelectionChanged: c(this, k, "f"),
      ref: t => d(this, g, t, "f")
    }, t("ch-tabular-grid-columnset", {
      class: "tabular-grid-column-set"
    }, t("ch-tabular-grid-column", {
      class: "tabular-grid-column",
      settingable: false,
      sortable: false,
      size: a.tabularGrid.colSize.common
    })), this.filteredModules.length ? t("ch-tabular-grid-rowset", {
      class: "tabular-grid-rowset"
    }, this.filteredModules.map((e => {
      const s = e.currentVersion;
      const i = c(this, f, "f").get(`${e.id}${R}${c(this, p, "f").get(e.id).currentSelectedVersion}`);
      const o = i.name;
      const a = i.description;
      return t("ch-tabular-grid-row", {
        // TODO: Replace tabular grid with other control, since it does not makes sense to use a grid with only one column.
        class: "tabular-grid-row",
        rowid: e.id,
        key: e.id
      }, t("ch-tabular-grid-cell", {
        class: "tabular-grid-cell"
      }, t("div", {
        class: "module-grid-item-info field-group"
      }, t("ch-image", {
        class: "icon-m module-icon",
        src: H,
        disabled: !s
      }), t("div", {
        class: "field field-block"
      }, t("h6", {
        class: "subtitle-semi-bold-xs"
      }, n(o, c(this, u, "f"))), t("p", {
        class: "body-regular-s"
      }, n(a, c(this, u, "f")))))));
    }))) : t("ch-tabular-grid-rowset", {
      class: "tabular-grid-rowset"
    }, t("ch-tabular-grid-rowset-empty", null, c(this, z, "f").call(this))))));
    /* module details/information renders*/    D.set(this, (() => {
      const e = c(this, f, "f").get(`${this.selectedModuleId}${R}${c(this, p, "f").get(this.selectedModuleId).currentSelectedVersion}`);
      const s = c(this, p, "f").get(this.selectedModuleId);
      const i = s.currentInstalledVersion;
      return t("div", {
        class: "module-info__title"
      }, t("ch-image", {
        class: "icon-l module-info__icon",
        src: H,
        disabled: !i
      }), t("h6", {
        class: "subtitle-semi-bold-s"
      }, e.name));
    }));
    E.set(this, (() => {
      const e = c(this, f, "f").get(`${this.selectedModuleId}${R}${c(this, p, "f").get(this.selectedModuleId).currentSelectedVersion}`).warningMessage;
      if (e) {
        return t("p", {
          class: "module-info__alert-message body-regular-s"
        }, e);
      }
    }));
    F.set(this, (async (t, e) => {
      if (this.serverSelectedCallback) {
        this.selectedServerId = t;
        this.loadingServer = true;
        const s = await this.serverSelectedCallback(t, e);
        this.modulesAll = [ ...s ];
        this.loadingServer = false;
      }
    }));
    L.set(this, (t => {
      this.selectedModuleId = undefined;
 // clear selected module
            d(this, u, "", "f");
 // clear filter
            this.selectedModuleType = "browse";
 // set "browse" as the default selected type
            const e = t.detail;
      c(this, F, "f").call(this, e, false);
    }));
    P.set(this, (async t => {
      if (this.serverContextMenuCallback) {
        const e = t.target.getBoundingClientRect();
        await this.serverContextMenuCallback({
          selection: [ this.selectedServerId ],
          clientX: e.x,
          clientY: e.y
        });
      }
    }));
    this.actionInProgress = false;
    this.executeActionCallbackInProgress = false;
    this.filteredModules = [];
    this.loadingServer = false;
    this.modulesAll = [];
    this.progressState = "in-progress";
    this.progressValue = 0;
    this.reRenderCounter = 0;
    this.selectedModuleAction = {
      message: "",
      progress: 0,
      state: "in-progress"
    };
    this.selectedModuleId = undefined;
    this.selectedModuleType = "browse";
    this.selectedServerId = undefined;
    this.selectedServerValue = undefined;
    this.serversComboBoxModel = [];
    this.selectedModuleVersions = [];
    this.autoCloseProgressBar = false;
    this.executeActionCallback = undefined;
    this.serverContextMenuCallback = undefined;
    this.serverSelectedCallback = undefined;
    this.servers = [];
    this.showServerCommands = false;
  }
  modulesAllChanged(t) {
    let e;
    if (this.selectedModuleId) {
      // If this.selectedModuleId has a value, serverSelectedCallback was called
      // but the server is the same. This occurs when a user action (e.g., install
      // or restore) requires modules to update. The selected module and version
      // remain unchanged. We must save the current version before #clearAll().
      e = c(this, p, "f").get(this.selectedModuleId).currentSelectedVersion;
    }
    c(this, w, "f").call(this);
    t.forEach((t => {
      let s = t.versions[0].id;
      if (e && this.selectedModuleId === t.id) {
        s = e;
      }
      // fulfill #modulesMap
            const i = mapModuleVersionDataToComboBoxModel(t.versions);
      c(this, p, "f").set(t.id, {
        moduleData: t,
        currentInstalledVersion: t.currentVersion,
        currentSelectedVersion: s,
        comboBoxVersionsModel: i
      });
      // fulfill #moduleVersionsMap.
            t.versions.forEach((e => {
        const s = `${t.id}${R}${e.id}`;
        c(this, f, "f").set(s, {
          id: e.id,
          action: e.action,
          description: e.description,
          properties: e.properties,
          name: e.name,
          warningMessage: e.warningMessage
        });
      }));
    }));
    d(this, m, true, "f");
    c(this, y, "f").call(this);
  }
  serversChanged(t) {
    if (t.length) {
      this.serversComboBoxModel = mapModuleServerDataToComboBoxModel(t);
      this.selectedServerValue = this.serversComboBoxModel[0].value;
    }
  }
  async componentWillLoad() {
    d(this, h, await r.getComponentStrings(this.el), "f");
    this.serversChanged(this.servers);
 // map ModuleServerData to ComboBoxModel
        d(this, v, [ {
      id: "browse",
      caption: c(this, h, "f").modules.buttonsContainer.browse
    }, {
      id: "installed",
      caption: c(this, h, "f").modules.buttonsContainer.installed
    }, {
      id: "updates",
      caption: c(this, h, "f").modules.buttonsContainer.updates
    } ], "f");
  }
  async componentDidLoad() {
    await c(this, F, "f").call(this, this.servers[0].id, false);
  }
  componentDidRender() {
    if (c(this, m, "f") && this.selectedModuleId) {
      // set selected module as selected on the grid after server reload.
      c(this, g, "f").selectRow(this.selectedModuleId, true);
      d(this, m, false, "f");
    }
  }
  progressBarClosedHandler() {
    // set it to false, to fire a re-render the next time the progress-bar is active.
    this.actionInProgress = false;
  }
  render() {
    return t(s, {
      class: "widget"
    }, t("ch-theme", {
      model: V
    }), t("section", {
      class: "main"
    }, t("div", {
      class: "modules__container field-group"
    }, t("header", {
      class: "modules__header field-group"
    }, t("div", {
      class: "field field-block"
    }, t("label", {
      class: "label",
      htmlFor: "servers-list"
    }, c(this, h, "f").modules.selectServer), t("div", {
      class: "modules__header-controls buttons-spacer"
    }, t("ch-combo-box-render", {
      // select server
      id: "servers-list",
      class: "combo-box combo-box-servers",
      model: this.serversComboBoxModel,
      value: this.selectedServerValue,
      disabled: this.loadingServer,
      onInput: c(this, L, "f")
    }), t("div", null, this.showServerCommands && t("button", {
      // server context menu button
      class: "button-tertiary button-icon-only",
      onClick: c(this, P, "f"),
      "aria-label": c(this, h, "f").showServerMenu,
      title: c(this, h, "f").showServerMenu
    }, t("ch-image", {
      src: X,
      class: "icon-m"
    })), t("button", {
      // reload server selected button
      class: "button-tertiary button-icon-only",
      onClick: c(this, T, "f"),
      "aria-label": c(this, h, "f").reloadModules,
      title: c(this, h, "f").reloadModules
    }, t("ch-image", {
      src: B,
      class: "icon-m"
    })))))), t("div", {
      // Modules main
      class: "modules__main"
    }, t("div", {
      class: "modules__main-header"
    }, t("div", {
      // search modules
      class: "field field-block"
    }, t("label", {
      class: "label",
      htmlFor: "search-modules"
    }, c(this, h, "f").modules.searchModules), t("ch-edit", {
      class: "input",
      value: c(this, u, "f"),
      onInput: c(this, x, "f"),
      disabled: this.loadingServer
    })), t("div", {
      class: "browse-modules"
    }, t("ch-segmented-control-render", {
      class: "segmented-control-filled",
      model: c(this, v, "f"),
      selectedId: this.selectedModuleType,
      onSelectedItemChange: c(this, W, "f")
    }))), t("div", {
      class: "grid-or-loader-container"
    }, this.loadingServer ? t("gx-ide-loader", {
      loaderTitle: c(this, h, "f").servers.loading,
      show: true
    }) : c(this, A, "f").call(this)))), t("div", {
      class: "module-info field-group"
    }, this.selectedModuleId ? [ t("header", {
      class: "module-info__header"
    }, c(this, D, "f").call(this), c(this, I, "f").call(this), c(this, S, "f").call(this), c(this, E, "f").call(this)), t("div", {
      class: "module-info__properties scrollable"
    }, t("div", {
      class: "module-info__properties-inner-wrapper"
    }, renderModuleDataProperties(c(this, f, "f").get(`${this.selectedModuleId}__${c(this, p, "f").get(this.selectedModuleId).currentSelectedVersion}`).properties))) ] : t("gx-ide-empty-state", {
      class: "recent-objects__empty-state",
      stateIconSrc: H,
      stateTitle: c(this, h, "f").modulesInformation.emptyState.title,
      stateDescription: c(this, h, "f").modulesInformation.emptyState.description
    })), t("footer", {
      class: "footer"
    }, t("gx-ide-progress-bar", {
      class: "border-block-start",
      slot: "footer-above",
      part: "progress-bar",
      stateType: this.progressState,
      caption: this.selectedModuleAction.message || c(this, h, "f").progressBar.defaultCaption,
      progress: this.progressValue,
      active: this.actionInProgress,
      closeType: this.autoCloseProgressBar ? "auto-close" : "button",
      closedCallback: c(this, j, "f"),
      ref: t => d(this, b, t, "f")
    }))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/manage-module-references" ];
  }
  get el() {
    return i(this);
  }
  static get watchers() {
    return {
      modulesAll: [ "modulesAllChanged" ],
      servers: [ "serversChanged" ]
    };
  }
};

h = new WeakMap, f = new WeakMap, p = new WeakMap, m = new WeakMap, u = new WeakMap, 
g = new WeakMap, b = new WeakMap, v = new WeakMap, w = new WeakMap, y = new WeakMap, 
_ = new WeakMap, x = new WeakMap, k = new WeakMap, M = new WeakMap, W = new WeakMap, 
$ = new WeakMap, C = new WeakMap, j = new WeakMap, T = new WeakMap, z = new WeakMap, 
I = new WeakMap, S = new WeakMap, A = new WeakMap, D = new WeakMap, E = new WeakMap, 
F = new WeakMap, L = new WeakMap, P = new WeakMap;

Y.style = l;

export { Y as gx_ide_manage_module_references };
//# sourceMappingURL=p-21775439.entry.js.map