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

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

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

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

const d = "button.button-secondary{border-color:var(--color-border-neutral-default)}:host{display:grid;block-size:100%;grid-template-rows:1fr max-content}.field-group{grid-auto-rows:max-content}.main{overflow:auto}.section{display:contents}.tooltip{position:absolute}";

var l = 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 h = undefined && undefined.__classPrivateFieldSet || function(t, e, i, s, o) {
  if (s === "m") throw new TypeError("Private method is not writable");
  if (s === "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 s === "a" ? o.call(t, i) : o ? o.value = i : e.set(t, i), i;
};

var u, f, p, m, b, w, v, g;

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

const k = class {
  constructor(s) {
    t(this, s);
    /**
         * The component hard-coded strings translations.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        u.set(this, void 0);
    f.set(this, void 0);
    p.set(this, e(`./gx-ide-assets/name-picker/shortcuts.json`));
    m.set(this, (t => {
      this.inputValue = t.detail;
      a(this.validatableControls, "input-name");
    }));
    b.set(this, (async () => {
      this.cancelCallback();
    }));
    w.set(this, (async () => {
      const t = await this.confirmCallback(this.inputValue);
      this.validatableControls = r(t, this.validatableControls);
    }));
    v.set(this, (() => {
      // populate validatableControls with the controls that could have errors.
      const t = [ l(this, f, "f") ];
      t.forEach((t => {
        if (t.id) {
          this.validatableControls.set(t.id, {
            reference: t,
            hasError: false,
            message: undefined
          });
        }
      }));
    }));
    // TODO: evaluate if this should be a global helper function.
    // It is used on other dialogs as well.
        g.set(this, (t => {
      var e, s, o;
      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) && ((o = this.validatableControls.get(t.id)) === null || o === void 0 ? void 0 : o.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);
    }));
    this.inputValue = undefined;
    this.validatableControls = new Map;
    this.cancelCallback = undefined;
    this.confirmCallback = undefined;
    this.defaultInputValue = undefined;
  }
  defaultInputValueChanged(t) {
    this.inputValue = t;
  }
  async componentWillLoad() {
    h(this, u, await c.getComponentStrings(this.el), "f");
    this.defaultInputValueChanged(this.defaultInputValue);
  }
  componentDidLoad() {
    l(this, v, "f").call(this);
  }
  render() {
    const t = !this.inputValue || this.inputValue.length === 0;
    return i(s, {
      class: "widget"
    }, i("ch-theme", {
      model: y
    }), i("ch-shortcuts", {
      src: l(this, p, "f")
    }), i("section", {
      class: "section"
    }, i("div", {
      class: "main scrollable field-group spacing-body"
    }, i("div", {
      class: "field field-block"
    }, i("label", {
      class: "label",
      htmlFor: "input-name"
    }, l(this, u, "f").labels.name), i("ch-edit", {
      type: "text",
      id: "input-name",
      class: "input",
      placeholder: l(this, u, "f").placeHolders.name,
      value: this.inputValue,
      onInput: l(this, m, "f"),
      ref: t => h(this, f, t, "f")
    }), l(this, g, "f").call(this, l(this, f, "f")))), i("footer", {
      class: "dialog-footer-with-border spacing-body"
    }, i("div", {
      class: "buttons-spacer"
    }, i("button", {
      id: "cancel-button",
      class: "button-secondary",
      onClick: l(this, b, "f")
    }, l(this, u, "f").buttons.cancel), i("button", {
      id: "confirm-button",
      class: "button-primary",
      onClick: l(this, w, "f"),
      disabled: t
    }, l(this, u, "f").buttons.confirm)))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/name-picker" ];
  }
  get el() {
    return o(this);
  }
  static get watchers() {
    return {
      defaultInputValue: [ "defaultInputValueChanged" ]
    };
  }
};

u = new WeakMap, f = new WeakMap, p = new WeakMap, m = new WeakMap, b = new WeakMap, 
w = new WeakMap, v = new WeakMap, g = new WeakMap;

k.style = d;

export { k as gx_ide_name_picker };
//# sourceMappingURL=p-2b3f161f.entry.js.map