import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { L as Locale } from './locale.js';
import { d as defineCustomElement$2 } from './ide-loader.js';

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

const signInTeamCss = ":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 __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _GxIdeSignInTeam_componentLocale, _GxIdeSignInTeam_userTeamsModel, _GxIdeSignInTeam_chSelectTeamEl, _GxIdeSignInTeam_switchStepTransitionTime, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, _GxIdeSignInTeam_privacyPolicyCheckboxEl, _GxIdeSignInTeam_authStepCallback, _GxIdeSignInTeam_continueHandler, _GxIdeSignInTeam_renderStepHeader, _GxIdeSignInTeam_renderStepFooter, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, _GxIdeSignInTeam_termsAndConditionsClickedHandler, _GxIdeSignInTeam_privacyPolicyClickedHandler, _GxIdeSignInTeam_evaluateStepRender;
const COPYRIGHTS_ILLUSTRATION = getAssetPath(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
const ICON_NEXT = getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
const CSS_BUNDLES = [
    "resets/box-sizing",
    "utils/typography",
    "components/button",
    "components/combo-box",
    "components/checkbox",
    "utils/form"
];
const CHECKED_VALUE = "on";
const GxIdeSignInTeam$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeSignInTeam extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /**
         * The component hard-coded strings translations.
         */
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeSignInTeam_componentLocale.set(this, void 0);
        // Select User Team References :
        _GxIdeSignInTeam_userTeamsModel.set(this, []);
        _GxIdeSignInTeam_chSelectTeamEl.set(this, void 0);
        _GxIdeSignInTeam_switchStepTransitionTime.set(this, 100);
        _GxIdeSignInTeam_termsAndConditionsCheckboxEl.set(this, void 0);
        _GxIdeSignInTeam_privacyPolicyCheckboxEl.set(this, void 0);
        _GxIdeSignInTeam_authStepCallback.set(this, () => {
            if (this.authStep === "signIn") {
                this.signInCallback();
            }
            else if (this.authStep === "selectUserTeam") {
                __classPrivateFieldGet(this, _GxIdeSignInTeam_continueHandler, "f").call(this);
            }
        });
        _GxIdeSignInTeam_continueHandler.set(this, async () => {
            await this.continueCallback(__classPrivateFieldGet(this, _GxIdeSignInTeam_chSelectTeamEl, "f").value);
        });
        _GxIdeSignInTeam_renderStepHeader.set(this, () => {
            return (h("header", { class: "slide__main-header" }, h("img", { src: ICON_NEXT, alt: "" // decorative
            }), h("h2", {
                // Split the title into two spans for better styling
                class: "slide__main-title heading-2"
            }, h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart1), h("span", null, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].titlePart2))));
        });
        _GxIdeSignInTeam_renderStepFooter.set(this, () => {
            const signInDisabled = this.authStep === "signIn" &&
                this.termsConfirmationRequired &&
                !this.termsAndConditionsAccepted;
            return (h("div", null, h("button", { class: "button-primary main-btn", onClick: __classPrivateFieldGet(this, _GxIdeSignInTeam_authStepCallback, "f"), disabled: signInDisabled }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f")[this.authStepInternal].buttonCaption)));
        });
        _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted.set(this, () => {
            const termsAndConditionsAccepted = __classPrivateFieldGet(this, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, "f").value === CHECKED_VALUE;
            const privacyPolicyAccepted = __classPrivateFieldGet(this, _GxIdeSignInTeam_privacyPolicyCheckboxEl, "f").value === CHECKED_VALUE;
            this.termsAndConditionsAccepted =
                termsAndConditionsAccepted && privacyPolicyAccepted;
        });
        _GxIdeSignInTeam_termsAndConditionsClickedHandler.set(this, (event) => {
            event.preventDefault();
            this.termsCallback();
        });
        _GxIdeSignInTeam_privacyPolicyClickedHandler.set(this, (event) => {
            event.preventDefault();
            this.privacyCallback();
        });
        _GxIdeSignInTeam_evaluateStepRender.set(this, () => {
            var _a;
            if (this.authStepInternal === "signIn") {
                return [
                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepHeader, "f").call(this),
                    h("p", { class: "body-regular-l" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").signIn.description),
                    this.termsConfirmationRequired && (h("div", { class: "field-group" }, h("div", {
                        // terms and conditions
                        class: "field field-inline"
                    }, h("ch-checkbox", { checkedValue: CHECKED_VALUE, id: "terms-and-conditions", class: "checkbox", ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_termsAndConditionsCheckboxEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, "f") }), h("span", null, h("label", { htmlFor: "terms-and-conditions", class: "label label-agreement" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.termsAndConditionsLabel, h("span", { class: { hyperlink: !!this.termsCallback }, onClick: this.termsCallback &&
                            __classPrivateFieldGet(this, _GxIdeSignInTeam_termsAndConditionsClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.termsAndConditionsLink)))), h("div", {
                        // privacy policy
                        class: "field field-inline"
                    }, h("ch-checkbox", { checkedValue: CHECKED_VALUE, id: "privacy-policy", class: "checkbox", ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_privacyPolicyCheckboxEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted, "f") }), h("span", null, h("label", { htmlFor: "privacy-policy", class: "label label-agreement" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.privacyAndPolicyLabel, h("span", { class: { hyperlink: !!this.privacyCallback }, onClick: this.privacyCallback && __classPrivateFieldGet(this, _GxIdeSignInTeam_privacyPolicyClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").agreement.privacyAndPolicyLink)))))),
                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepFooter, "f").call(this)
                ];
            }
            else if (this.authStepInternal === "fetchUserTeams" ||
                this.authStepInternal === "settingUpSession") {
                const loaderTitle = this.authStepInternal === "fetchUserTeams"
                    ? __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.fetchingTeamsTitle
                    : __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.settingUpSessionTitle;
                const loaderDescription = this.authStepInternal === "fetchUserTeams"
                    ? __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.fetchingTeamsDescription
                    : __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").loader.settingUpDescription;
                return (h("gx-ide-loader", { show: true, loaderTitle: loaderTitle, description: loaderDescription }));
            }
            else if (this.authStepInternal === "selectUserTeam") {
                return [
                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepHeader, "f").call(this),
                    h("div", { class: "slide__select-team-description" }, h("p", { class: "body-semi-bold-l" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").selectUserTeam.infoMessage)),
                    h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_componentLocale, "f").selectUserTeam.label), h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f"), value: (_a = __classPrivateFieldGet(this, _GxIdeSignInTeam_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value, ref: (el) => (__classPrivateFieldSet(this, _GxIdeSignInTeam_chSelectTeamEl, el, "f")) }))),
                    __classPrivateFieldGet(this, _GxIdeSignInTeam_renderStepFooter, "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(newAuthStep) {
        this.slideIsVisible = false;
        // switch step
        setTimeout(() => {
            this.authStepInternal = newAuthStep;
        }, __classPrivateFieldGet(this, _GxIdeSignInTeam_switchStepTransitionTime, "f"));
        // show slide
        setTimeout(() => {
            this.slideIsVisible = true;
        }, __classPrivateFieldGet(this, _GxIdeSignInTeam_switchStepTransitionTime, "f") * 2);
    }
    teamsChanged(newTeams) {
        __classPrivateFieldSet(this, _GxIdeSignInTeam_userTeamsModel, mapTeamsToComboBoxItemModel(newTeams), "f");
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeSignInTeam_componentLocale, await Locale.getComponentStrings(this.el), "f");
        this.el.style.setProperty("--switch-step-transtion-time", __classPrivateFieldGet(this, _GxIdeSignInTeam_switchStepTransitionTime, "f").toString() + "ms");
        // Initialize values
        this.authStepInternal = this.authStep;
        this.teamsChanged(this.teams);
    }
    render() {
        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "slide" }, h("img", { src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: "" // decorative
        }), h("div", { class: {
                "slide__main": true,
                "slide__main--visible": this.slideIsVisible
            } }, h("div", { class: "slide__main-container" }, __classPrivateFieldGet(this, _GxIdeSignInTeam_evaluateStepRender, "f").call(this))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/sign-in-team"]; }
    get el() { return this; }
    static get watchers() { return {
        "authStep": ["authStepChanged"],
        "teams": ["teamsChanged"]
    }; }
    static get style() { return signInTeamCss; }
}, [1, "gx-ide-sign-in-team", {
        "authStep": [1, "auth-step"],
        "continueCallback": [16],
        "signInCallback": [16],
        "termsConfirmationRequired": [4, "terms-confirmation-required"],
        "teams": [16],
        "termsCallback": [16],
        "privacyCallback": [16],
        "authStepInternal": [32],
        "slideIsVisible": [32],
        "termsAndConditionsAccepted": [32]
    }, undefined, {
        "authStep": ["authStepChanged"],
        "teams": ["teamsChanged"]
    }]);
_GxIdeSignInTeam_componentLocale = new WeakMap(), _GxIdeSignInTeam_userTeamsModel = new WeakMap(), _GxIdeSignInTeam_chSelectTeamEl = new WeakMap(), _GxIdeSignInTeam_switchStepTransitionTime = new WeakMap(), _GxIdeSignInTeam_termsAndConditionsCheckboxEl = new WeakMap(), _GxIdeSignInTeam_privacyPolicyCheckboxEl = new WeakMap(), _GxIdeSignInTeam_authStepCallback = new WeakMap(), _GxIdeSignInTeam_continueHandler = new WeakMap(), _GxIdeSignInTeam_renderStepHeader = new WeakMap(), _GxIdeSignInTeam_renderStepFooter = new WeakMap(), _GxIdeSignInTeam_evaluateTermsConditionsAndPrivacyAccepted = new WeakMap(), _GxIdeSignInTeam_termsAndConditionsClickedHandler = new WeakMap(), _GxIdeSignInTeam_privacyPolicyClickedHandler = new WeakMap(), _GxIdeSignInTeam_evaluateStepRender = new WeakMap();
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-sign-in-team", "gx-ide-loader"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-sign-in-team":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeSignInTeam$1);
            }
            break;
        case "gx-ide-loader":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const GxIdeSignInTeam = GxIdeSignInTeam$1;
const defineCustomElement = defineCustomElement$1;

export { GxIdeSignInTeam, defineCustomElement };

//# sourceMappingURL=gx-ide-sign-in-team.js.map