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

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

const mapTeamsToComboBoxItemModel = e => e === null || e === void 0 ? void 0 : e.map((e => ({
  value: e.id,
  caption: e.name
})));

const o = "button.button-secondary {\n  border-color: var(--color-border-neutral-default);\n}\n\n:host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--color-accent-surface-elevation-1);\n  overflow: hidden;\n}\n.slide__illustration {\n  overflow: hidden;\n  object-fit: cover;\n  object-position: left;\n  block-size: 100%;\n  inline-size: 100%;\n}\n.slide__main {\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: 48px;\n  transform: translateY(4px);\n  transition: var(--display-teams-transtion-time) all;\n  opacity: 0;\n  position: relative;\n}\n.slide__main--visible {\n  transform: translateY(0);\n  opacity: 1;\n}\n.slide__main-container {\n  display: grid;\n  place-self: center;\n  gap: var(--spacing-gap-xxl);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--spacing-gap-xxl);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--font-size-header-h2);\n  font-weight: var(--font-style-semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--color-text-neutral-strawberry);\n}\n.slide__main-description {\n  display: grid;\n  gap: 40px;\n  font-size: var(--font-size-body-l);\n  font-weight: var(--font-style-regular);\n  line-height: var(--line-height-spacious);\n  color: var(--color-text-neutral-disabled);\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n  --ch-combo-box__popover-max-inline-size: 400px;\n}\n\n.buttons-container {\n  display: flex;\n  gap: var(--spacing-gap-xl);\n}\n\n.continue-btn,\n.cancel-btn {\n  flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}";

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

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

var c, d, h, m, p, f;

const u = e(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);

const g = e(`./gx-ide-assets/welcome-page/images/icon-next.svg`);

const b = [ "resets/box-sizing", "utils/typography", "components/button", "components/combo-box" ];

const v = class {
  constructor(e) {
    n(this, e);
    /**
         * The component hard-coded strings translations.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        c.set(this, void 0);
    // Select User Team References :
        d.set(this, []);
    h.set(this, void 0);
    m.set(this, 100);
    p.set(this, (async () => {
      await this.continueCallback(r(this, h, "f").value);
    }));
    f.set(this, (async () => {
      await this.cancelCallback();
    }));
    this.slideIsVisible = false;
    this.teamsModelReady = false;
    this.cancelCallback = undefined;
    this.continueCallback = undefined;
    this.teams = undefined;
  }
  teamsChanged(e) {
    this.slideIsVisible = false;
    // switch step
        setTimeout((() => {
      if (e.length) {
        l(this, d, mapTeamsToComboBoxItemModel(e), "f");
        this.teamsModelReady = true;
      } else {
        this.teamsModelReady = false;
      }
    }), r(this, m, "f"));
    // show slide
        setTimeout((() => {
      this.slideIsVisible = true;
    }), r(this, m, "f") * 2);
  }
  async componentWillLoad() {
    l(this, c, await a.getComponentStrings(this.el), "f");
    this.teamsChanged(this.teams);
    this.el.style.setProperty("--display-teams-transtion-time", r(this, m, "f").toString() + "ms");
  }
  componentDidLoad() {
    this.slideIsVisible = true;
  }
  render() {
    var e;
    return i(t, null, i("ch-theme", {
      model: b
    }), i("section", {
      class: "slide"
    }, i("img", {
      src: u,
      class: "slide__illustration",
      alt: ""
    }), i("div", {
      class: {
        slide__main: true,
        "slide__main--visible": this.slideIsVisible
      }
    }, i("div", {
      class: "slide__main-container"
    }, this.teamsModelReady ? [ i("header", {
      class: "slide__main-header"
    }, i("img", {
      src: g,
      alt: ""
    }), i("h2", {
      // Split the title into two spans for better styling
      class: "slide__main-title"
    }, i("span", null, r(this, c, "f").title))), i("div", {
      class: "slide__select-team-description"
    }, i("p", {
      class: "body-semi-bold-l"
    }, r(this, c, "f").infoMessage)), i("div", {
      class: "field-group"
    }, i("div", {
      class: "field field-block"
    }, i("label", {
      htmlFor: "teams"
    }, r(this, c, "f").teams), i("ch-combo-box-render", {
      id: "teams",
      accessibleName: "Teams",
      class: "combo-box teams-list",
      model: r(this, d, "f"),
      value: r(this, d, "f") && ((e = r(this, d, "f")[0]) === null || e === void 0 ? void 0 : e.value),
      ref: e => l(this, h, e, "f")
    }))), i("div", {
      class: "buttons-container"
    }, i("button", {
      class: "button-primary continue-btn",
      onClick: r(this, p, "f")
    }, r(this, c, "f").continueButtonCaption), i("button", {
      class: "button-secondary cancel-btn",
      onClick: r(this, f, "f")
    }, r(this, c, "f").cancelButtonCaption)) ] : i("gx-ide-loader", {
      show: true,
      loaderTitle: r(this, c, "f").loader.title,
      description: r(this, c, "f").loader.description
    })))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/select-user-team" ];
  }
  get el() {
    return s(this);
  }
  static get watchers() {
    return {
      teams: [ "teamsChanged" ]
    };
  }
};

c = new WeakMap, d = new WeakMap, h = new WeakMap, m = new WeakMap, p = new WeakMap, 
f = new WeakMap;

v.style = o;

export { v as gx_ide_select_user_team };
//# sourceMappingURL=p-2317ffcb.entry.js.map