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

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

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

import "lit";

import "lit/directives/when.js";

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

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

import { v as o, c as n } from "./p-b32b6b1f.js";

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

import { s as d } from "./p-02fb496a.js";

const h = "button.button-secondary{border-color:var(--color-border-neutral-default)}.custom-icon-text-wrapper{display:flex;align-items:center;gap:var(--spacing-gap-m)}.warning-error-description{display:flex;align-items:center;gap:var(--spacing-gap-m);padding:var(--spacing-padding-m);max-inline-size:800px;line-height:var(--line-height-spacious)}.warning-error-icon{flex-shrink:0}:host{display:grid;block-size:100%;grid-template-rows:max-content max-content 1fr max-content;row-gap:var(--spacing-gap-xl);overflow:auto}:host(.new-connection){grid-template-rows:max-content 1fr}:host(.recently-used-empty){grid-template-rows:max-content 1fr}.section{display:contents}ch-tabular-grid.tabular-grid{border-radius:4px;overflow:hidden;overflow:auto;border:1px solid var(--color-border-surface-on-elevation-1)}ch-tabular-grid-rowset-empty{position:relative;border-block-end:1px solid var(--grid-cell-border-color);overflow:hidden;min-block-size:200px}.tabular-grid ch-tabular-grid-cell:is(:nth-child(2),:nth-child(3),:nth-child(4)){align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}.text-neutral-gray-400,.tabular-grid-cell.text-neutral-gray-400{color:var(--color-text-neutral-disabled)}.search-server{inline-size:50%}.tabular-grid{overflow:auto;border-block:1px solid var(--grid-cell-border-color)}.tabular-grid-all-servers .tabular-grid-column:first-child::part(bar){--grid-common__gap:0}.field-block-all-servers{overflow:auto}.tabular-grid-wrapper{position:relative;overflow:auto}.border-patch{--tabular-grid-border-radius:4px;position:absolute;inset-block-start:0;inline-size:calc(100% - var(--tabular-grid-border-radius) * 2);inset-inline-start:var(--tabular-grid-border-radius);block-size:2px;background-color:var(--items-container__bg-color);z-index:9999;border-block-start:1px solid var(--color-border-surface-on-surface)}.tooltip{position:absolute}.recently-used-card{border:1px solid var(--color-border-surface-on-elevation-1);border-radius:4px;cursor:pointer}.recently-used-card:hover{background-color:var(--color-accent-item-hover)}.recently-used-card:focus-visible{outline:var(--focus-outline-width) solid var(--color-border-primary-focused);outline-offset:calc(2px * -1)}.recently-used-card--selected{background-color:var(--color-accent-neutral-contrast);border-color:var(--color-border-item-pressed)}.recently-used-card-content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:var(--spacing-padding-m);gap:var(--spacing-gap-xxs);overflow:hidden}.recently-used-card-content .text-decoration-line-underline{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-decoration:underline}.delete-server-icon{margin-inline:calc((30.39px - var(--ch-image-size)) / 2)}.tabular-grid ch-tabular-grid-cell:is(:nth-child(5)){--control-border-width:0;--control-border-color:transparent;--control-border-radius:0;padding-block:0;padding-inline:0;--control-padding-inline:var(--spacing-padding-l);--control-padding-block:6.5px;display:grid;align-items:stretch;justify-content:stretch;min-inline-size:0}.tabular-grid ch-tabular-grid-cell:is(:nth-child(5)):hover{outline:1px solid var(--color-border-primary-focused);outline-offset:calc(var(--size-2) * -1)}";

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

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

var p, b, g, m, v, w, y, k, x, M, W, z, C, N, j, I, _, T, E, S, $, A, D, H, F, L, U, P, R, V, O, q, B;

const G = [ "resets/box-sizing", "utils/form--full", "utils/layout", "utils/typography", "utils/spacing", "components/tooltip", "chameleon/scrollbar", "components/tabular-grid" ];

const J = a({
  category: "system",
  name: "information",
  colorType: "on-surface"
});

const K = a({
  category: "system",
  name: "lock",
  colorType: "on-surface"
});

const Q = a({
  category: "system",
  name: "language",
  colorType: "on-surface"
});

const X = a({
  category: "system",
  name: "delete-outlined",
  colorType: "interactive"
});

const Y = a({
  category: "system",
  name: "error",
  colorType: "error"
});

const Z = a({
  category: "system",
  name: "search",
  colorType: "on-surface"
});

const ee = "server-name-";

const te = class {
  constructor(s) {
    e(this, s);
    p.set(this, void 0);
    b.set(this, void 0);
    g.set(this, void 0);
    m.set(this, void 0);
    v.set(this, void 0);
    w.set(this, new Map);
    y.set(this, []);
    k.set(this, t(`./gx-ide-assets/server-selector/shortcuts.json`));
    x.set(this, (() => {
      this.cancelCallback();
    }));
    M.set(this, (async () => {
      let e;
      if (this.selectedConnectionType === "select") {
        e = await this.selectServerCallback({
          uri: this.selectedServerUri,
          name: this.selectedServerName
        }, this.selectedConnectionType);
      } else {
        e = await this.selectServerCallback({
          uri: this.serverUrlInputValue,
          name: this.serverNameInputValue
        }, this.selectedConnectionType);
        this.validatableControls = o(e, this.validatableControls);
      }
    }));
    // TODO: evaluate if this should be a global helper function.
    // It is used on other dialogs as well.
        W.set(this, (e => {
      var t, s, r;
      return ((s = (t = this.validatableControls) === null || t === void 0 ? void 0 : t.get(e === null || e === void 0 ? void 0 : e.id)) === null || s === void 0 ? void 0 : s.hasError) && ((r = this.validatableControls.get(e.id)) === null || r === void 0 ? void 0 : r.message) && i("ch-tooltip", {
        class: "tooltip",
        actionElement: e,
        blockAlign: l.tooltipSettings.blockAlign,
        inlineAlign: l.tooltipSettings.inlineAlign,
        delay: l.tooltipSettings.delay
      }, this.validatableControls.get(e.id).message);
    }));
    z.set(this, (e => {
      e.forEach((e => {
        if (e.id && !this.validatableControls.has(e.id)) {
          this.validatableControls.set(e.id, {
            reference: e,
            hasError: false,
            message: undefined
          });
        }
      }));
    }));
    C.set(this, (e => {
      this.filterValue = e.detail.toLowerCase();
      this.filteredServersData = this.serversData.filter((e => e.serverName.toLowerCase().includes(this.filterValue)));
    }));
    N.set(this, ((e, t) => {
      this.enableConfirmButton = false;
      this[t] = e.detail.trim();
      const i = t === "serverUrlInputValue" ? "server-url" : "server-name";
      n(this.validatableControls, i);
      u(this, E, "f").call(this);
    }));
    j.set(this, (async e => {
      var t;
      this.selectedRecentlyUsedId = e.id;
      await ((t = u(this, b, "f")) === null || t === void 0 ? void 0 : t.selectRow(e.id));
      await u(this, A, "f").call(this, e.id);
    }));
    I.set(this, (async e => {
      if (e.accessLevel === "private") {
        const t = await this.deleteServerCallback(e);
        if (t) {
          this.selectedServerName = "None";
          this.enableConfirmButton = false;
        }
      }
    }));
    _.set(this, (async e => {
      f(this, v, e.detail, "f");
    }));
    T.set(this, (async e => {
      let t = {
        fieldErrors: [],
        success: false
      };
      if (e.serverName !== u(this, v, "f") && e.accessLevel === "private") {
        t = await this.updateServerCallback(Object.assign(Object.assign({}, e), {
          serverName: u(this, v, "f")
        }));
      }
      this.validatableControls = o(t, this.validatableControls);
      if (t.success || e.serverName === u(this, v, "f")) {
        this.selectedServerName = u(this, v, "f");
        n(this.validatableControls, `${ee}${e.id}`);
      }
    }));
    E.set(this, (() => {
      if (this.serverUrlInputValue && this.serverUrlInputValue.length > 0 && this.serverNameInputValue && this.serverNameInputValue.length > 0) {
        this.enableConfirmButton = true;
      } else {
        this.enableConfirmButton = false;
      }
    }));
    S.set(this, (e => {
      u(this, A, "f").call(this, e.id);
      u(this, M, "f").call(this);
    }));
    $.set(this, (e => u(this, A, "f").call(this, e.detail.rowId)));
    A.set(this, (async e => {
      if (e === undefined) {
        this.enableConfirmButton = false;
        this.selectedServerUri = undefined;
        this.selectedServerName = undefined;
        return;
      }
      const t = this.serversData.find((t => t.id === e));
      this.enableConfirmButton = true;
      this.selectedServerName = t === null || t === void 0 ? void 0 : t.serverName;
      this.selectedServerUri = t === null || t === void 0 ? void 0 : t.serverUrl;
      this.userName = (t === null || t === void 0 ? void 0 : t.gxServerUsername) || "";
      this.selectedRecentlyUsedId = t === null || t === void 0 ? void 0 : t.id;
    }));
    D.set(this, (e => {
      this.selectedConnectionType = e.detail;
      if (this.selectedConnectionType === "new") {
        this.enableConfirmButton = false;
        this.serverUrlInputValue = "";
      }
      this.selectedServerName = "None";
    }));
    H.set(this, (e => {
      this.filteredServersData = [ ...d(e, this.filteredServersData, "string", undefined) ];
    }));
    F.set(this, ((e = false) => i("ch-tabular-grid-columnset", {
      class: "tabular-grid-column-set"
    }, i("ch-tabular-grid-column", {
      columnId: "icon",
      class: "tabular-grid-column tabular-grid-column-icon",
      columnName: "Icon",
      settingable: false,
      columnNameHidden: true,
      size: l.tabularGrid.colSize.maxContent,
      resizable: false,
      sortable: false
    }), i("ch-tabular-grid-column", {
      columnId: "serverName",
      class: "tabular-grid-column",
      columnName: "Server Name",
      settingable: false,
      columnNameHidden: e,
      size: l.tabularGrid.colSize.serverName,
      resizable: false,
      sortable: !e,
      onColumnSortChanged: u(this, H, "f")
    }), i("ch-tabular-grid-column", {
      columnId: "serverUrl",
      class: "tabular-grid-column",
      columnName: "Server Url",
      settingable: false,
      columnNameHidden: e,
      size: l.tabularGrid.colSize.auto,
      resizable: false,
      sortable: !e,
      onColumnSortChanged: u(this, H, "f")
    }), i("ch-tabular-grid-column", {
      columnId: "userName",
      class: "tabular-grid-column",
      columnName: "Connected",
      settingable: false,
      columnNameHidden: e,
      size: l.tabularGrid.colSize.userName,
      resizable: false,
      sortable: !e,
      onColumnSortChanged: u(this, H, "f")
    }), i("ch-tabular-grid-column", {
      columnId: "action",
      class: "tabular-grid-column tabular-grid-column-icon",
      columnName: "Action",
      settingable: false,
      columnNameHidden: true,
      size: l.tabularGrid.colSize.maxContent,
      resizable: false,
      sortable: false
    }))));
    L.set(this, (e => e !== "" ? i("ch-tooltip", {
      class: "tooltip",
      actionElement: null,
      blockAlign: "outside-end",
      inlineAlign: l.tooltipSettings.inlineAlign,
      delay: l.tooltipSettings.delayLong
    }, e) : null));
    U.set(this, (e => i("ch-tabular-grid-rowset", {
      class: "tabular-grid-rowset"
    }, i("ch-tabular-grid-rowset-empty", null, i("p", {
      class: "warning-error-description"
    }, i("ch-image", {
      class: "icon-m warning-error-icon",
      src: Y
    }), e)))));
    P.set(this, (e => [ i("ch-tabular-grid-cell", {
      class: "tabular-grid-cell"
    }, u(this, V, "f").call(this, e.accessLevel)), i("ch-tabular-grid-cell", {
      class: "tabular-grid-cell"
    }, e.accessLevel === "private" ? i("ch-edit", {
      id: `${ee}${e.id}`,
      value: e.serverName,
      onInput: u(this, _, "f"),
      onChange: () => u(this, T, "f").call(this, e),
      maxLength: 18,
      ref: t => {
        const i = `${ee}${e.id}`;
        if (t) {
          u(this, w, "f").set(i, t);
        } else {
          u(this, w, "f").delete(i);
        }
      }
    }) : e.serverName), i("ch-tabular-grid-cell", {
      class: "tabular-grid-cell"
    }, e.serverUrl, u(this, L, "f").call(this, e.serverUrl)), i("ch-tabular-grid-cell", {
      class: "tabular-grid-cell"
    }, e.gxServerUsername), i("ch-tabular-grid-cell", {
      class: "tabular-grid-cell",
      onClick: () => u(this, I, "f").call(this, e)
    }, i("button", {
      id: "delete-button",
      class: "button-tertiary button-icon-only",
      "aria-label": u(this, p, "f").actions.deleteServer,
      disabled: e.accessLevel === "public"
    }, i("ch-image", {
      disabled: e.accessLevel === "public",
      class: "icon-m delete-server-icon",
      src: X
    }))) ]));
    R.set(this, (() => i("div", {
      class: "tabular-grid-wrapper"
    }, i("div", {
      class: "border-patch"
    }), i("ch-tabular-grid", {
      class: "tabular-grid tabular-grid-all-servers",
      rowSelectionMode: "single",
      ref: e => f(this, b, e, "f"),
      allowColumnReorder: false,
      onRowClicked: u(this, $, "f"),
      id: "all-servers"
    }, u(this, F, "f").call(this), this.filteredServersData.length > 0 ? i("ch-tabular-grid-rowset", {
      class: "tabular-grid-rowset"
    }, this.filteredServersData.map((e => {
      var t, s;
      const r = `${ee}${e.id}`;
      const a = ((t = this.validatableControls.get(r)) === null || t === void 0 ? void 0 : t.hasError) === true;
      const l = (s = this.validatableControls.get(r)) === null || s === void 0 ? void 0 : s.message;
      return i("ch-tabular-grid-row", {
        rowid: e.id,
        class: "tabular-grid-row"
      }, u(this, P, "f").call(this, e), a && u(this, U, "f").call(this, l));
    }))) : i("ch-tabular-grid-rowset", {
      class: "tabular-grid-rowset"
    }, i("ch-tabular-grid-rowset-empty", null, i("gx-ide-empty-state", {
      class: "empty-state",
      stateIconSrc: J,
      stateTitle: u(this, p, "f").emptyConnectedServers,
      isAnimated: true
    })))))));
    V.set(this, (e => {
      const t = e === "private" ? K : Q;
      return i("ch-image", {
        class: "icon-m",
        src: t
      });
    }));
    O.set(this, (() => {
      const e = this.selectedConnectionType === "select";
      return i("footer", {
        class: {
          "dialog-footer-with-border": true,
          "dialog-footer-space-between": this.selectedConnectionType === "select",
          "space-between": e,
          "spacing-body-inline": true,
          "spacing-body-block": true
        }
      }, e && i("p", {
        class: "body-italic-m"
      }, "Selected: ", this.selectedServerName), i("div", {
        class: "buttons-spacer"
      }, i("button", {
        // cancel button
        id: "cancel-button",
        class: "button-secondary",
        onClick: u(this, x, "f")
      }, u(this, p, "f").footer.cancel), i("button", {
        // confirm button
        id: "confirm-button",
        class: "button-primary",
        onClick: this.enableConfirmButton && u(this, M, "f"),
        disabled: !this.enableConfirmButton
      }, u(this, p, "f").footer.confirm)));
    }));
    q.set(this, (() => {
      const e = this.selectedConnectionType === "select" && this.recentlyUsedServersData.length > 0;
      return e && i("div", {
        class: "field field-block spacing-body-inline"
      }, i("label", {
        class: "label",
        htmlFor: "recently-used-servers"
      }, u(this, p, "f").recentlyUsed.title), i("div", {
        class: {
          layout: true,
          "layout--cols-3": this.recentlyUsedServersData.length >= 3,
          "layout--cols-2": this.recentlyUsedServersData.length <= 2
        }
      }, this.recentlyUsedServersData.map(((e, t) => i("button", {
        id: "recently-used-server-" + t,
        class: {
          layout__panel: true,
          "recently-used-card": true,
          "recently-used-card--selected": this.selectedRecentlyUsedId === e.id
        },
        onClick: () => u(this, j, "f").call(this, e),
        onDblClick: () => u(this, S, "f").call(this, e)
      }, i("div", {
        class: "recently-used-card-content"
      }, i("p", {
        class: "body-regular-s text-neutral-gray-400"
      }, e.serverName), i("p", {
        class: "body-regular-s text-neutral-gray-400 text-decoration-line-underline"
      }, e.serverUrl)), u(this, L, "f").call(this, e.serverUrl))))));
    }));
    B.set(this, (() => i("div", {
      class: "field field-block field-block-all-servers spacing-body-inline"
    }, i("label", {
      class: "label",
      htmlFor: "all-servers"
    }, u(this, p, "f").allServers.title), u(this, R, "f").call(this))));
    this.enableConfirmButton = false;
    this.serverUrlInputValue = "";
    this.serverNameInputValue = "";
    this.selectedServerUri = undefined;
    this.selectedServerName = "None";
    this.userName = undefined;
    this.filterValue = "";
    this.filteredServersData = [];
    this.validatableControls = new Map;
    this.selectedConnectionType = "select";
    this.selectedRecentlyUsedId = undefined;
    this.serversData = [];
    this.recentlyUsedServersData = [];
    this.cancelCallback = undefined;
    this.selectServerCallback = undefined;
    this.deleteServerCallback = undefined;
    this.updateServerCallback = undefined;
  }
  serversDataChanged(e) {
    this.filteredServersData = e;
  }
  async componentWillLoad() {
    var e, t;
    f(this, p, await c.getComponentStrings(this.el), "f");
    f(this, y, [ {
      value: "select",
      caption: u(this, p, "f").captions.selectServer
    }, {
      value: "new",
      caption: u(this, p, "f").captions.addServer
    } ], "f");
    this.selectedServerUri = (e = this.serversData[0]) === null || e === void 0 ? void 0 : e.serverUrl;
    this.userName = (t = this.serversData[0]) === null || t === void 0 ? void 0 : t.gxServerUsername;
    this.filteredServersData = this.serversData;
  }
  componentDidRender() {
    if (this.selectedConnectionType === "new" && u(this, g, "f") && u(this, m, "f")) {
      u(this, z, "f").call(this, [ u(this, g, "f"), u(this, m, "f") ]);
      u(this, w, "f").clear();
    }
    if (this.selectedConnectionType === "select" && u(this, w, "f").size > 0) {
      u(this, z, "f").call(this, [ ...u(this, w, "f").values() ]);
    }
  }
  render() {
    return i(s, {
      class: {
        "widget elevation-1": true,
        "new-connection": this.selectedConnectionType === "new",
        "recently-used-empty": this.recentlyUsedServersData.length === 0
      }
    }, i("ch-theme", {
      model: G
    }), i("ch-shortcuts", {
      src: u(this, k, "f")
    }), i("main", {
      class: "section"
    }, i("header", {
      class: "header spacing-body-block-start spacing-body-inline"
    }, i("div", {
      class: "field-group"
    }, i("label", {
      class: "body-regular-m text-neutral-gray-400"
    }, u(this, p, "f").header.title), i("ch-radio-group-render", {
      class: "radio-group",
      model: u(this, y, "f"),
      onChange: u(this, D, "f"),
      value: u(this, y, "f")[0].value
    }), this.selectedConnectionType === "select" && i("ch-edit", {
      class: "input search-server",
      id: "server-name-search",
      startImgSrc: Z,
      onInput: u(this, C, "f"),
      placeholder: u(this, p, "f").placeholders.searchServers,
      accessibleName: "search server",
      type: "search"
    }))), this.selectedConnectionType === "select" && [ u(this, q, "f").call(this), u(this, B, "f").call(this) ], this.selectedConnectionType === "new" && i("section", {
      class: "spacing-body-inline"
    }, i("div", {
      class: "layout layout--cols-2"
    }, i("div", {
      class: "field field-block layout__panel"
    }, i("label", {
      class: "label",
      htmlFor: "server-url"
    }, u(this, p, "f").labels.serverUrl), i("ch-edit", {
      // server url
      class: "input",
      id: "server-url",
      value: this.serverUrlInputValue,
      onInput: e => u(this, N, "f").call(this, e, "serverUrlInputValue"),
      placeholder: u(this, p, "f").placeholders.serverUrl,
      ref: e => f(this, g, e, "f")
    }), u(this, W, "f").call(this, u(this, g, "f"))), i("div", {
      class: "field field-block layout__panel"
    }, i("label", {
      class: "label",
      htmlFor: "server-name"
    }, u(this, p, "f").labels.serverName), i("ch-edit", {
      // server friendly name
      class: "input",
      id: "server-name",
      value: this.serverNameInputValue,
      onInput: e => u(this, N, "f").call(this, e, "serverNameInputValue"),
      placeholder: u(this, p, "f").placeholders.serverName,
      maxLength: 18,
      ref: e => f(this, m, e, "f")
    }), u(this, W, "f").call(this, u(this, m, "f"))))), u(this, O, "f").call(this)));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/server-selector" ];
  }
  get el() {
    return r(this);
  }
  static get watchers() {
    return {
      serversData: [ "serversDataChanged" ]
    };
  }
};

p = new WeakMap, b = new WeakMap, g = new WeakMap, m = new WeakMap, v = new WeakMap, 
w = new WeakMap, y = new WeakMap, k = new WeakMap, x = new WeakMap, M = new WeakMap, 
W = new WeakMap, z = new WeakMap, C = new WeakMap, N = new WeakMap, j = new WeakMap, 
I = new WeakMap, _ = new WeakMap, T = new WeakMap, E = new WeakMap, S = new WeakMap, 
$ = new WeakMap, A = new WeakMap, D = new WeakMap, H = new WeakMap, F = new WeakMap, 
L = new WeakMap, U = new WeakMap, P = new WeakMap, R = new WeakMap, V = new WeakMap, 
O = new WeakMap, q = new WeakMap, B = new WeakMap;

te.style = h;

export { te as gx_ide_server_selector };
//# sourceMappingURL=p-944a589f.entry.js.map