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

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

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

import { r, m as h } from "./p-4d330836.js";

import { s as d, g as l } from "./p-91e2ebb0.js";

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

import { r as f } from "./p-1252519a.js";

const u = 'button.button-secondary{border-color:var(--color-border-neutral-default)}:host{display:grid;block-size:100%;grid-template-rows:max-content 1fr max-content}.section{display:contents}.basic,.advanced{padding-block-start:16px;block-size:100%;overflow:auto}.advanced{padding-block-end:12px}.basic{display:grid;grid-template:"runtime-environment runtime-environment" max-content "back-end front-end" 1fr;grid-template-columns:1fr 1fr}.basic__runtime-environment{grid-area:runtime-environment;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-gap-m)}.basic__runtime-environment.one-runtime-only{align-items:center;flex-direction:row;justify-content:center}.dialog-header__back-end,.dialog-header__front-end{padding-block-start:16px}.basic__back-end{grid-area:back-end}.basic__front-end{grid-area:front-end}.basic__back-end,.basic__front-end{display:grid;grid-template-rows:max-content 1fr;grid-auto-rows:max-content;overflow:auto}.main__back-end{border-inline-end:var(--section-common-border)}.main__back-end,.main__front-end{grid-auto-rows:max-content;padding-block:12px;overflow:auto}.text-align-center{text-align:center}.tab::part(page){scrollbar-width:thin}.checkbox{inline-size:max-content}';

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

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

var m, g, v, w, k, y, _, x, M, W, C, j, E, S, z, I, T, F, L, P, A, D, H, R, V, q, B, G, J, K, N;

const O = [ 
// TODO: review if "utils/form--full" is required.
"resets/box-sizing", "components/tab", "components/tooltip", "utils/form--full", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];

const Q = "main";

const U = "basic";

const X = "basic";

const Y = "advanced";

const Z = class {
  constructor(s) {
    t(this, s);
    m.set(this, false);
    g.set(this, void 0);
    v.set(this, false);
    /**
         * frontEndsState saves the id's of the front ends checkboxes that are checked
         */
    // TODO (Use a set instead of an array to improve performance)
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        w.set(this, new Map);
    k.set(this, void 0);
    y.set(this, void 0);
    _.set(this, void 0);
    x.set(this, e(`./gx-ide-assets/new-environment/shortcuts.json`));
    M.set(this, []);
    /**
         * The component hard-coded strings translations.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        W.set(this, void 0);
    // References needed to collect data con "createCallback" button submit*/
        C.set(this, void 0);
    j.set(this, void 0);
    E.set(this, void 0);
    S.set(this, void 0);
    z.set(this, (() => {
      /* the data store item id is used for the value (they are equal)*/
      b(this, k, p(this, C, "f").value, "f");
      p(this, B, "f").call(this);
    }));
    I.set(this, (t => {
      const e = t.detail.trim();
      b(this, v, e !== this.environmentName, "f");
    }));
    T.set(this, (() => {
      var t;
      b(this, _, (t = this.runtimes[0]) === null || t === void 0 ? void 0 : t.value, "f");
    }));
    // TODO: We must avoid performing the get 3 times.
    // It is used on new-environment as well.
        F.set(this, (t => {
      var e, s, a;
      return ((s = (e = this.validatableControls) === null || e === void 0 ? void 0 : e.get(t === null || t === void 0 ? void 0 : t.id)) === null || s === void 0 ? void 0 : s.hasError) && ((a = this.validatableControls.get(t.id)) === null || a === void 0 ? void 0 : a.message) && i("ch-tooltip", {
        class: "tooltip",
        actionElement: t,
        blockAlign: n.tooltipSettings.blockAlign,
        inlineAlign: n.tooltipSettings.inlineAlign,
        delay: n.tooltipSettings.delay
      }, this.validatableControls.get(t.id).message);
    }));
    L.set(this, (() => {
      // populate #controlsValidation with the controls that could have errors.
      const t = [ p(this, C, "f"), p(this, E, "f") ];
      t.forEach((t => {
        if (t.id) {
          this.validatableControls.set(t.id, {
            reference: t,
            hasError: false,
            message: undefined
          });
        }
      }));
    }));
    P.set(this, (async t => {
      b(this, y, t.detail, "f");
      await p(this, q, "f").call(this);
      p(this, G, "f").call(this);
      p(this, B, "f").call(this);
    }));
    A.set(this, (() => i("slot", {
      name: "property-grid"
    })));
    D.set(this, (() => [ i("div", {
      class: {
        "basic__runtime-environment": true,
        "dialog-header-with-border": true,
        "one-runtime-only": this.runtimes.length === 1
      }
    }, this.runtimes.length > 1 ? [ i("h2", {
      // Runtime Environment
      class: "subtitle-regular-xs\t text-align-center"
    }, p(this, W, "f").runtime), i("ch-radio-group-render", {
      class: "radio-group",
      onChange: p(this, H, "f"),
      model: this.runtimesRadioGroupModel,
      value: p(this, _, "f")
    }) ] : [ i("h2", {
      class: "subtitle-regular-xs\t text-align-center"
    }, p(this, W, "f").runtime, ":"), i("p", null, this.runtimesRadioGroupModel[0].caption) ]), i("section", {
      class: "basic__back-end scrollable"
    }, i("h2", {
      // back end
      class: "dialog-header dialog-header-with-border dialog-header__back-end subtitle-regular-xs\t text-align-center spacing-body-inline"
    }, p(this, W, "f").tabBasic.backEnd.backEndLabel), i("div", {
      class: "field-group main__back-end spacing-body-inline scrollable"
    }, i("div", {
      // #language
      class: "field field-block"
    }, i("label", {
      class: "label",
      htmlFor: "language"
    }, p(this, W, "f").tabBasic.backEnd.language), i("ch-combo-box-render", {
      id: "language",
      class: "combo-box",
      part: "language",
      value: p(this, y, "f"),
      disabled: this.languages.length === 0,
      model: this.languageComboBoxModel,
      onInput: p(this, P, "f"),
      ref: t => b(this, E, t, "f")
    }), p(this, F, "f").call(this, p(this, E, "f"))), i("div", {
      // #data stores
      class: "field field-block"
    }, i("label", {
      class: "label",
      htmlFor: "data-store"
    }, p(this, W, "f").tabBasic.backEnd.dataStores), i("ch-combo-box-render", {
      id: "data-store",
      class: "combo-box",
      part: "data-store",
      value: p(this, k, "f"),
      model: this.dataStoresComboBoxModel,
      onInput: p(this, z, "f"),
      ref: t => b(this, C, t, "f")
    }), p(this, F, "f").call(this, p(this, C, "f"))))), i("section", {
      class: "basic__front-end scrollable"
    }, i("h2", {
      // front end
      class: "dialog-header dialog-header-with-border dialog-header__front-end subtitle-regular-xs\t text-align-center spacing-body-inline"
    }, p(this, W, "f").tabBasic.frontEnd.frontEndLabel), i("div", {
      class: "field-group front-end__checkboxes spacing-body-inline main__front-end scrollable",
      role: "group",
      "aria-labelledby": p(this, W, "f").tabBasic.frontEnd.generators
    }, r(this.frontEnds, p(this, K, "f"), p(this, w, "f").get(p(this, y, "f"))))) ]));
    H.set(this, (async t => {
      b(this, _, t.detail, "f");
      await p(this, J, "f").call(this);
      await p(this, q, "f").call(this);
      p(this, B, "f").call(this);
    }));
    R.set(this, (async () => {
      var t, e;
      const i = (t = p(this, w, "f").get(p(this, y, "f"))) !== null && t !== void 0 ? t : [];
      this.createCallback({
        setAsCurrent: !!((e = p(this, S, "f")) === null || e === void 0 ? void 0 : e.value),
        name: p(this, j, "f").value,
        runtime: p(this, _, "f"),
        language: p(this, E, "f").value,
        dataStores: p(this, C, "f").value,
        frontEnds: i
      }).then((t => {
        this.validatableControls = c(t, this.validatableControls);
      }));
    }));
    V.set(this, (t => {
      if (t.detail.newSelectedId === Y) {
        this.advancedTabIsVisible = true;
        // Some logic for advanced tab is done on componentDidRender lifecycle,
        // since the reference to the elements is needed.
            }
    }));
    q.set(this, (async () => {
      const t = await this.getDataSourcesCallback(p(this, y, "f"), p(this, _, "f"));
      if ((t === null || t === void 0 ? void 0 : t.length) > 0) {
        this.dataStores = t;
      }
    }));
    B.set(this, (async () => {
      if (!p(this, v, "f")) {
        this.environmentName = await this.getEnvironmentNameCallback(p(this, y, "f"), p(this, k, "f"), p(this, _, "f"));
      }
    }));
    G.set(this, (async () => {
      const t = await this.getFrontEndsCallback(p(this, y, "f"));
      if ((t === null || t === void 0 ? void 0 : t.length) > 0) {
        this.frontEnds = t;
      }
    }));
    J.set(this, (async () => {
      const t = await this.getLanguagesCallback(p(this, _, "f"));
      if ((t === null || t === void 0 ? void 0 : t.length) > 0) {
        this.languages = t;
      }
    }));
    K.set(this, (t => {
      const e = t.target.checkedValue;
      const i = t.detail === e;
      p(this, N, "f").call(this, e, i);
    }));
    /**
         * This function updates frontEndsCheckedMap, that contains the checked
         * checkboxes for each language front ends.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        N.set(this, ((t, e) => {
      let i = p(this, w, "f").get(p(this, y, "f"));
      if (!i) {
        // first time
        i = [];
        p(this, w, "f").set(p(this, y, "f"), i);
      }
      if (e) {
        // update by adding
        i.push(t);
      } else {
        // update by removing
        const e = i.findIndex((e => e === t));
        f(i, e);
      }
    }));
    this.advancedTabIsVisible = false;
    this.frontEnds = undefined;
    this.validatableControls = new Map;
    this.dataStoresComboBoxModel = [];
    this.languageComboBoxModel = [];
    this.runtimesRadioGroupModel = [];
    this.cancelCallback = undefined;
    this.createCallback = undefined;
    this.dataStores = undefined;
    this.environmentName = undefined;
    this.getDataSourcesCallback = undefined;
    this.getEnvironmentNameCallback = undefined;
    this.getFrontEndsCallback = undefined;
    this.isAdvanced = false;
    this.languages = undefined;
    this.getLanguagesCallback = undefined;
    this.runtimes = undefined;
    this.setAsTarget = true;
  }
  dataStoresChanged(t) {
    if (t === null || t === void 0 ? void 0 : t.length) {
      this.dataStoresComboBoxModel = h(t);
      const e = d(t, p(this, k, "f"));
      b(this, k, l(e), "f");
    }
  }
  languagesChanged(t) {
    if (t === null || t === void 0 ? void 0 : t.length) {
      this.languageComboBoxModel = h(t);
      b(this, y, l(t), "f");
      p(this, G, "f").call(this);
    }
  }
  runtimesChanged(t) {
    if (t === null || t === void 0 ? void 0 : t.length) {
      this.runtimesRadioGroupModel = h(this.runtimes);
      p(this, J, "f").call(this);
    }
  }
  connectedCallback() {
    this.dataStoresChanged(this.dataStores);
    this.languagesChanged(this.languages);
    this.runtimesChanged(this.runtimes);
  }
  componentDidLoad() {
    p(this, L, "f").call(this);
  }
  componentDidRender() {
    if (this.advancedTabIsVisible && !p(this, m, "f")) {
      // just call this once.
      b(this, m, true, "f");
    }
  }
  async componentWillLoad() {
    b(this, W, await o.getComponentStrings(this.el), "f");
    b(this, M, [ {
      id: X,
      name: p(this, W, "f").tabBasic.tabLabel
    }, {
      id: Y,
      name: p(this, W, "f").tabAdvanced.tabLabel
    } ], "f");
    p(this, T, "f").call(this);
  }
  /**
     * Suspends or reactivates the shortcuts
     */  async suspendShortcuts(t) {
    if (t) {
      p(this, g, "f").suspend = true;
    } else {
      p(this, g, "f").suspend = false;
    }
  }
  render() {
    return i(s, {
      class: "widget scrollable"
    }, i("ch-theme", {
      model: O
    }), i("ch-shortcuts", {
      src: p(this, x, "f"),
      ref: t => b(this, g, t, "f")
    }), i("section", {
      class: "section"
    }, i("header", {
      class: {
        header: true,
        "spacing-body-inline": true,
        "spacing-body-block-start": true,
        "dialog-header": this.isAdvanced,
        "dialog-header-with-border": !this.isAdvanced
      }
    }, i("div", {
      // #environment name
      class: "field field-inline"
    }, i("label", {
      class: "label",
      htmlFor: "environment-name"
    }, p(this, W, "f").name), i("ch-edit", {
      // environment name
      autoFocus: true,
      id: "environment-name",
      class: "input",
      part: "environment-name",
      value: this.environmentName,
      placeholder: p(this, W, "f").environmentNamePlaceholder,
      // TODO: toolTip={config.tooltip}
      ref: t => b(this, j, t, "f"),
      onInput: p(this, I, "f")
    }))), this.isAdvanced ? i("ch-tab-render", {
      // main section
      class: {
        tab: true,
        [Q]: true
      },
      tabListPosition: "block-start",
      model: p(this, M, "f"),
      selectedId: X,
      overflow: "auto",
      contain: "size",
      onSelectedItemChange: !this.advancedTabIsVisible && p(this, V, "f")
    }, i("div", {
      slot: X,
      class: U,
      part: "tab-button-basic"
    }, p(this, D, "f").call(this)), this.advancedTabIsVisible && i("div", {
      slot: Y,
      class: "advanced spacing-body-inline",
      part: "tab-button-advanced"
    }, p(this, A, "f").call(this))) : i("div", {
      // main section
      class: Q
    }, i("div", {
      class: U
    }, p(this, D, "f").call(this))), i("footer", {
      class: {
        "dialog-footer": this.isAdvanced,
        "dialog-footer-with-border": !this.isAdvanced,
        "dialog-footer-space-between": true,
        "spacing-body-block-end": true,
        "spacing-body-inline": true
      }
    }, i("ch-checkbox", {
      // #set as current environment
      class: "checkbox",
      caption: p(this, W, "f").footer.setAsCurrentEnvironment,
      ref: t => b(this, S, t, "f"),
      checkedValue: "current-environment",
      value: this.setAsTarget ? "current-environment" : "",
      part: "set-as-current-environment"
    }), i("div", {
      class: "buttons-spacer"
    }, i("button", {
      // #cancel
      class: "button-secondary",
      onClick: this.cancelCallback,
      part: "button button-cancel"
    }, p(this, W, "f").footer.btnCancel), i("button", {
      // #create
      class: "button-primary",
      onClick: p(this, R, "f"),
      part: "button button-create"
    }, p(this, W, "f").footer.btnCreate)))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/new-environment" ];
  }
  get el() {
    return a(this);
  }
  static get watchers() {
    return {
      dataStores: [ "dataStoresChanged" ],
      languages: [ "languagesChanged" ],
      runtimes: [ "runtimesChanged" ]
    };
  }
};

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

Z.style = u;

export { Z as gx_ide_new_environment };
//# sourceMappingURL=p-5727fce7.entry.js.map