import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { L as Locale } from './locale.js';

const signInCss = ":host{display:grid;block-size:100%;inline-size:100%;align-items:center;justify-content:center}.slide{display:grid;max-inline-size:1100px;grid-template-columns:1fr 550px;background-color:var(--color-accent-surface-elevation-1);border-radius:16px;overflow:hidden}.slide__illustration{overflow:hidden;max-block-size:700px}.slide__sign-in{display:grid;block-size:100%;inline-size:100%;padding:48px}.slide__sign-in-container{display:grid;gap:var(--spacing-gap-xxl);max-inline-size:480px;place-self:center}.slide__sign-in-header{display:grid;gap:var(--spacing-gap-xxl)}.slide__sign-in-title{font-size:var(--font-size-header-h2);color:var(--color-text-neutral-strawberry);letter-spacing:0.02em;font-weight:var(--font-style-semi-bold);line-height:var(--line-height-tight)}.slide__sign-in-description{display:grid;color:var(--color-text-neutral-disabled);gap:40px;font-size:var(--font-size-body-l);font-weight:var(--font-style-regular);line-height:var(--line-height-spacious)}.terms-conditions{text-decoration:underline}.sign-in-btn{padding-inline-start:48px !important;padding-inline-end:48px !important}";

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 __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 _GxIdeUiSplash_componentLocale;
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"
];
const GxIdeUiSplash = /*@__PURE__*/ proxyCustomElement(class GxIdeUiSplash 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
        _GxIdeUiSplash_componentLocale.set(this, void 0);
        this.termsCallback = undefined;
        this.signInCallback = undefined;
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeUiSplash_componentLocale, await Locale.getComponentStrings(this.el), "f");
    }
    render() {
        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "slide" }, h("div", { class: "slide__illustration", role: "img", "aria-label": __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationAriaLabel }, h("img", {
            // base image (acts like a background)
            src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationFigureAriaLabel
        })), h("div", { class: "slide__sign-in" }, h("div", { class: "slide__sign-in-container" }, h("header", { class: "slide__sign-in-header" }, h("img", { src: ICON_NEXT, alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationAlternativeText }), h("h2", { class: "slide__sign-in-title" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").title)), h("div", { class: "slide__sign-in-description" }, h("p", null, h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").descriptionText)), h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").byContinuingTextFirstPart, h("a", { class: "terms-conditions", onClick: this.termsCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").byContinuingCallBackText))), h("div", null, h("button", { class: "button-primary sign-in-btn", onClick: this.signInCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").signInButtonCaption)))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/sign-in"]; }
    get el() { return this; }
    static get style() { return signInCss; }
}, [1, "gx-ide-sign-in", {
        "termsCallback": [16],
        "signInCallback": [16]
    }]);
_GxIdeUiSplash_componentLocale = new WeakMap();
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-sign-in"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-sign-in":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeUiSplash);
            }
            break;
    } });
}

const GxIdeSignIn = GxIdeUiSplash;
const defineCustomElement = defineCustomElement$1;

export { GxIdeSignIn, defineCustomElement };

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