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

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

const mapTeamsToComboBoxItemModel = i => {
  if (!i) {
    return [];
  }
  return i.map((i => ({
    value: i.id,
    caption: i.name
  })));
};

const l = ":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  border-radius: var(--dialog-border-radius, 16px);\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(--switch-step-transtion-time) all;\n  opacity: 0;\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  letter-spacing: 0.02em;\n}\n.slide__main-description {\n  display: grid;\n  gap: 40px;\n  color: var(--color-text-neutral-disabled);\n  max-inline-size: 370px;\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.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\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}\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\n}";

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

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

var h, c, d, p, f, m, u, g, b, x, w, v, k, _;

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

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

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

const M = "on";

const T = class {
  constructor(i) {
    e(this, i);
    /**
         * The component hard-coded strings translations.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        h.set(this, void 0);
    // Select User Team References :
        c.set(this, []);
    d.set(this, void 0);
    p.set(this, 100);
    f.set(this, void 0);
    m.set(this, void 0);
    u.set(this, (() => {
      if (this.authStep === "signIn") {
        this.signInCallback();
      } else if (this.authStep === "selectUserTeam") {
        r(this, g, "f").call(this);
      }
    }));
    g.set(this, (async () => {
      await this.continueCallback(r(this, d, "f").value);
    }));
    b.set(this, (() => n("header", {
      class: "slide__main-header"
    }, n("img", {
      src: z,
      alt: ""
    }), n("h2", {
      // Split the title into two spans for better styling
      class: "slide__main-title heading-2"
    }, n("span", null, r(this, h, "f")[this.authStepInternal].titlePart1), n("span", null, r(this, h, "f")[this.authStepInternal].titlePart2)))));
    x.set(this, (() => {
      const i = this.authStep === "signIn" && this.termsConfirmationRequired && !this.termsAndConditionsAccepted;
      return n("div", null, n("button", {
        class: "button-primary main-btn",
        onClick: r(this, u, "f"),
        disabled: i
      }, r(this, h, "f")[this.authStepInternal].buttonCaption));
    }));
    w.set(this, (() => {
      const i = r(this, f, "f").value === M;
      const e = r(this, m, "f").value === M;
      this.termsAndConditionsAccepted = i && e;
    }));
    v.set(this, (i => {
      i.preventDefault();
      this.termsCallback();
    }));
    k.set(this, (i => {
      i.preventDefault();
      this.privacyCallback();
    }));
    _.set(this, (() => {
      var i;
      if (this.authStepInternal === "signIn") {
        return [ r(this, b, "f").call(this), n("p", {
          class: "body-regular-l"
        }, r(this, h, "f").signIn.description), this.termsConfirmationRequired && n("div", {
          class: "field-group"
        }, n("div", {
          // terms and conditions
          class: "field field-inline"
        }, n("ch-checkbox", {
          checkedValue: M,
          id: "terms-and-conditions",
          class: "checkbox",
          ref: i => o(this, f, i, "f"),
          onInput: r(this, w, "f")
        }), n("span", null, n("label", {
          htmlFor: "terms-and-conditions",
          class: "label label-agreement"
        }, r(this, h, "f").agreement.termsAndConditionsLabel, n("span", {
          class: {
            hyperlink: !!this.termsCallback
          },
          onClick: this.termsCallback && r(this, v, "f")
        }, r(this, h, "f").agreement.termsAndConditionsLink)))), n("div", {
          // privacy policy
          class: "field field-inline"
        }, n("ch-checkbox", {
          checkedValue: M,
          id: "privacy-policy",
          class: "checkbox",
          ref: i => o(this, m, i, "f"),
          onInput: r(this, w, "f")
        }), n("span", null, n("label", {
          htmlFor: "privacy-policy",
          class: "label label-agreement"
        }, r(this, h, "f").agreement.privacyAndPolicyLabel, n("span", {
          class: {
            hyperlink: !!this.privacyCallback
          },
          onClick: this.privacyCallback && r(this, k, "f")
        }, r(this, h, "f").agreement.privacyAndPolicyLink))))), r(this, x, "f").call(this) ];
      } else if (this.authStepInternal === "fetchUserTeams" || this.authStepInternal === "settingUpSession") {
        const i = this.authStepInternal === "fetchUserTeams" ? r(this, h, "f").loader.fetchingTeamsTitle : r(this, h, "f").loader.settingUpSessionTitle;
        const e = this.authStepInternal === "fetchUserTeams" ? r(this, h, "f").loader.fetchingTeamsDescription : r(this, h, "f").loader.settingUpDescription;
        return n("gx-ide-loader", {
          show: true,
          loaderTitle: i,
          description: e
        });
      } else if (this.authStepInternal === "selectUserTeam") {
        return [ r(this, b, "f").call(this), n("div", {
          class: "slide__select-team-description"
        }, n("p", {
          class: "body-semi-bold-l"
        }, r(this, h, "f").selectUserTeam.infoMessage)), n("div", {
          class: "field-group"
        }, n("div", {
          class: "field field-block"
        }, n("label", {
          htmlFor: "teams"
        }, r(this, h, "f").selectUserTeam.label), n("ch-combo-box-render", {
          id: "teams",
          accessibleName: "Teams",
          class: "combo-box teams-list",
          model: r(this, c, "f"),
          value: (i = r(this, c, "f")[0]) === null || i === void 0 ? void 0 : i.value,
          ref: i => o(this, d, i, "f")
        }))), r(this, x, "f").call(this) ];
      }
    }));
    this.authStepInternal = undefined;
    this.slideIsVisible = true;
    this.termsAndConditionsAccepted = false;
    this.authStep = "signIn";
    this.continueCallback = undefined;
    this.signInCallback = undefined;
    this.termsConfirmationRequired = false;
    this.teams = undefined;
    this.termsCallback = undefined;
    this.privacyCallback = undefined;
  }
  authStepChanged(i) {
    this.slideIsVisible = false;
    // switch step
        setTimeout((() => {
      this.authStepInternal = i;
    }), r(this, p, "f"));
    // show slide
        setTimeout((() => {
      this.slideIsVisible = true;
    }), r(this, p, "f") * 2);
  }
  teamsChanged(i) {
    o(this, c, mapTeamsToComboBoxItemModel(i), "f");
  }
  async componentWillLoad() {
    o(this, h, await a.getComponentStrings(this.el), "f");
    this.el.style.setProperty("--switch-step-transtion-time", r(this, p, "f").toString() + "ms");
    // Initialize values
        this.authStepInternal = this.authStep;
    this.teamsChanged(this.teams);
  }
  render() {
    return n(s, null, n("ch-theme", {
      model: W
    }), n("section", {
      class: "slide"
    }, n("img", {
      src: y,
      class: "slide__illustration",
      alt: ""
    }), n("div", {
      class: {
        slide__main: true,
        "slide__main--visible": this.slideIsVisible
      }
    }, n("div", {
      class: "slide__main-container"
    }, r(this, _, "f").call(this)))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/sign-in-team" ];
  }
  get el() {
    return t(this);
  }
  static get watchers() {
    return {
      authStep: [ "authStepChanged" ],
      teams: [ "teamsChanged" ]
    };
  }
};

h = new WeakMap, c = new WeakMap, d = new WeakMap, p = new WeakMap, f = new WeakMap, 
m = new WeakMap, u = new WeakMap, g = new WeakMap, b = new WeakMap, x = new WeakMap, 
w = new WeakMap, v = new WeakMap, k = new WeakMap, _ = new WeakMap;

T.style = l;

export { T as gx_ide_sign_in_team };
//# sourceMappingURL=p-1d44dd0a.entry.js.map