import { g as getAssetPath, r as registerInstance, h, H as Host, a as getElement } from './index-b153bfd0.js';
import { L as Locale } from './locale-e5107fad.js';

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

const selectUserTeamCss = "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 __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 _GxIdeSelectUserTeam_componentLocale, _GxIdeSelectUserTeam_userTeamsModel, _GxIdeSelectUserTeam_chSelectTeamEl, _GxIdeSelectUserTeam_displayTeamsTransitionTime, _GxIdeSelectUserTeam_continueHandler, _GxIdeSelectUserTeam_cancelHandler;
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"
];
const GxIdeSelectUserTeam = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The component hard-coded strings translations.
         */
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeSelectUserTeam_componentLocale.set(this, void 0);
        // Select User Team References :
        _GxIdeSelectUserTeam_userTeamsModel.set(this, []);
        _GxIdeSelectUserTeam_chSelectTeamEl.set(this, void 0);
        _GxIdeSelectUserTeam_displayTeamsTransitionTime.set(this, 100);
        _GxIdeSelectUserTeam_continueHandler.set(this, async () => {
            await this.continueCallback(__classPrivateFieldGet(this, _GxIdeSelectUserTeam_chSelectTeamEl, "f").value);
        });
        _GxIdeSelectUserTeam_cancelHandler.set(this, async () => {
            await this.cancelCallback();
        });
        this.slideIsVisible = false;
        this.teamsModelReady = false;
        this.cancelCallback = undefined;
        this.continueCallback = undefined;
        this.teams = undefined;
    }
    teamsChanged(newTeams) {
        this.slideIsVisible = false;
        // switch step
        setTimeout(() => {
            if (newTeams.length) {
                __classPrivateFieldSet(this, _GxIdeSelectUserTeam_userTeamsModel, mapTeamsToComboBoxItemModel(newTeams), "f");
                this.teamsModelReady = true;
            }
            else {
                this.teamsModelReady = false;
            }
        }, __classPrivateFieldGet(this, _GxIdeSelectUserTeam_displayTeamsTransitionTime, "f"));
        // show slide
        setTimeout(() => {
            this.slideIsVisible = true;
        }, __classPrivateFieldGet(this, _GxIdeSelectUserTeam_displayTeamsTransitionTime, "f") * 2);
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeSelectUserTeam_componentLocale, await Locale.getComponentStrings(this.el), "f");
        this.teamsChanged(this.teams);
        this.el.style.setProperty("--display-teams-transtion-time", __classPrivateFieldGet(this, _GxIdeSelectUserTeam_displayTeamsTransitionTime, "f").toString() + "ms");
    }
    componentDidLoad() {
        this.slideIsVisible = true;
    }
    render() {
        var _a;
        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" }, this.teamsModelReady ? ([
            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"
            }, h("span", null, __classPrivateFieldGet(this, _GxIdeSelectUserTeam_componentLocale, "f").title))),
            h("div", { class: "slide__select-team-description" }, h("p", { class: "body-semi-bold-l" }, __classPrivateFieldGet(this, _GxIdeSelectUserTeam_componentLocale, "f").infoMessage)),
            h("div", { class: "field-group" }, h("div", { class: "field field-block" }, h("label", { htmlFor: "teams" }, __classPrivateFieldGet(this, _GxIdeSelectUserTeam_componentLocale, "f").teams), h("ch-combo-box-render", { id: "teams", accessibleName: "Teams", class: "combo-box teams-list", model: __classPrivateFieldGet(this, _GxIdeSelectUserTeam_userTeamsModel, "f"), value: __classPrivateFieldGet(this, _GxIdeSelectUserTeam_userTeamsModel, "f") && ((_a = __classPrivateFieldGet(this, _GxIdeSelectUserTeam_userTeamsModel, "f")[0]) === null || _a === void 0 ? void 0 : _a.value), ref: (el) => (__classPrivateFieldSet(this, _GxIdeSelectUserTeam_chSelectTeamEl, el, "f")) }))),
            h("div", { class: "buttons-container" }, h("button", { class: "button-primary continue-btn", onClick: __classPrivateFieldGet(this, _GxIdeSelectUserTeam_continueHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSelectUserTeam_componentLocale, "f").continueButtonCaption), h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeSelectUserTeam_cancelHandler, "f") }, __classPrivateFieldGet(this, _GxIdeSelectUserTeam_componentLocale, "f").cancelButtonCaption))
        ]) : (h("gx-ide-loader", { show: true, loaderTitle: __classPrivateFieldGet(this, _GxIdeSelectUserTeam_componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeSelectUserTeam_componentLocale, "f").loader.description })))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/select-user-team"]; }
    get el() { return getElement(this); }
    static get watchers() { return {
        "teams": ["teamsChanged"]
    }; }
};
_GxIdeSelectUserTeam_componentLocale = new WeakMap(), _GxIdeSelectUserTeam_userTeamsModel = new WeakMap(), _GxIdeSelectUserTeam_chSelectTeamEl = new WeakMap(), _GxIdeSelectUserTeam_displayTeamsTransitionTime = new WeakMap(), _GxIdeSelectUserTeam_continueHandler = new WeakMap(), _GxIdeSelectUserTeam_cancelHandler = new WeakMap();
GxIdeSelectUserTeam.style = selectUserTeamCss;

export { GxIdeSelectUserTeam as gx_ide_select_user_team };

//# sourceMappingURL=gx-ide-select-user-team.entry.js.map