import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { g as getIconPath } from './mer-animated-dots.js';
import 'lit';
import 'lit/directives/when.js';
import 'lit/directives/if-defined.js';
import { L as Locale } from './locale.js';
import { A as ANIMATION_DOTS } from './common.js';

const splashCss = "button.button-secondary{border-color:var(--color-border-neutral-default)}:host{--wrapper-copacity:0;--wrapper-min-inline-size:700px;--wrapper-max-inline-size:1040px;--wrapper-block-size:640px;transition:var(--timing-regular) opacity;display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;padding:var(--spacing-padding-xl);overflow:auto}.wrapper{flex:1;display:grid;grid-template-columns:1fr var(--wrapper-block-size);block-size:var(--wrapper-block-size);max-inline-size:var(--wrapper-max-inline-size);background-color:var(--color-accent-surface-elevation-1);border-radius:12px;overflow:auto;transform:translateY(4px)}.side-inline-start{background-size:cover}.side-inline-end{position:relative;display:grid;grid-template-rows:max-content 1fr max-content;padding-block:64px;padding-inline:80px;transition:var(--timing-slow) grid-template-rows;overflow:auto}.close-button{position:absolute;inset-inline-end:0;inset-block-start:0}.header{display:grid;gap:var(--spacing-gap-xl);margin-block-end:92px}.header__logo__close-button{display:flex;justify-content:space-between}.title{color:var(--color-text-neutral-strawberry);letter-spacing:0.02em}.next-version{color:var(--color-text-neutral-strawberry)}.header__description{color:var(--color-text-neutral-disabled);line-height:1.45 !important}.main{display:flex;flex-direction:column;gap:var(--spacing-gap-l);overflow:auto}.log__container{--logVisibleLines:7;--logFontSize:var(\n    --font-size-body-s\n  );--logLineHeight:var(\n    --line-height-relaxed\n  );--logGap:4px;--logContainerBlockSize:calc(\n    var(--logFontSize) * var(--logLineHeight) * var(--logVisibleLines) +\n      calc(var(--logGap) * (var(--logVisibleLines) - 1))\n  );block-size:var(--logContainerBlockSize);font-family:var(--font-family-code);color:var(--color-text-neutral-disabled);display:flex;flex-direction:column-reverse;gap:var(--logGap);overflow:hidden}.log__container:hover{overflow:auto}.log__container>p{font-family:inherit}.log__message{opacity:0;transition:var(--timing-regular) opacity;animation:fadeInLogMessage 0.45s ease-out forwards}.log__message--error{color:var(--color-text-error-default)}.footer{display:grid;grid-auto-rows:max-content;gap:var(--spacing-gap-l);margin-block-start:24px}.error-message{color:var(--color-text-error-default);margin-block-start:auto;display:-webkit-box;-webkit-line-clamp:2}.status--processing{display:flex;flex-direction:row;align-items:baseline;gap:var(--spacing-gap-xs)}@keyframes fadeInLogMessage{from{opacity:0}to{opacity:1}}";

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/splash/images/copyrights-illustration.svg`);
const LOGO_NEXT = getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
const CSS_BUNDLES = [
    "resets/box-sizing",
    "utils/typography",
    "components/button",
    "components/icon",
    "chameleon/scrollbar"
];
const OPEN_LOG_ICON = getIconPath({
    category: "system",
    name: "launch",
    colorType: "primary"
});
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.ariaBusy = true;
        this.appVersion = undefined;
        this.downloadDockerCallback = undefined;
        this.quitCallback = undefined;
        this.messages = [];
        this.openLogCallback = undefined;
        this.showQuitButton = false;
        this.showOpenLogLink = false;
        this.showDockerMissingError = false;
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeUiSplash_componentLocale, await Locale.getComponentStrings(this.el), "f");
    }
    render() {
        var _a, _b;
        const renderOpenLogLink = this.showOpenLogLink && this.openLogCallback;
        const renderInstallationErrorMessage = this.showQuitButton && this.quitCallback && this.messages.length > 0;
        const renderInitializingMessage = !(this.showQuitButton && this.quitCallback) && ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) > 0;
        const renderErrorMessage = this.showDockerMissingError || !renderInitializingMessage;
        let installationErrorMessage = __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").warnings.installationFailed;
        if (renderOpenLogLink) {
            installationErrorMessage = `${installationErrorMessage} ${__classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").warnings.checkTheLog}`;
        }
        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: {
                scrollable: true,
                wrapper: true
            } }, h("div", { class: "side-inline-start", style: { backgroundImage: `url(${COPYRIGHTS_ILLUSTRATION})` }, role: "img" }), h("section", { class: "side-inline-end scrollable" }, h("header", { class: "header" }, h("img", { src: LOGO_NEXT, alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").illustrationAlternativeText }), h("h2", { class: "title heading-2" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").title), this.appVersion && (h("p", { class: "body-regular-m next-version" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").nextVersion, " ", this.appVersion)), h("p", { class: "body-italic-m header__description" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").allRightsReserved), h("p", { class: "body-italic-m header__description" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright)), h("main", { class: "main" }, renderInitializingMessage && (h("p", { class: {
                "body-regular-m": true,
                "status--processing": true
            } }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").initializingServices, ANIMATION_DOTS("tiny", "on-surface"))), h("code", { class: "log__container scrollable", role: "status", "aria-live": "polite", "aria-busy": this.ariaBusy }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.reverse().map((message, i) => {
            return (h("p", { class: {
                    "caption-regular-l": true,
                    "log__message": true,
                    "log__message--error": message.type === "error"
                }, key: this.messages.length - i }, message.text));
        })), renderErrorMessage && (h("p", { class: "error-message status--error body-regular-m" }, renderInstallationErrorMessage && (h("span", null, installationErrorMessage)), renderInstallationErrorMessage &&
            this.showDockerMissingError && h("span", null, " - "), this.showDockerMissingError && (h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").warnings.dockerMissing))))), h("footer", { class: "footer" }, h("div", { class: "buttons-spacer" }, this.showDockerMissingError && (h("button", { key: "download-docker", class: "button-secondary button-icon-and-text download-docker-button", onClick: this.downloadDockerCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").downloadDocker)), renderOpenLogLink && (h("button", { key: "open-log", class: "button-tertiary button-icon-and-text", onClick: this.openLogCallback }, h("ch-image", { class: "icon-m", src: OPEN_LOG_ICON }), __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").openLog)), this.quitCallback && this.showQuitButton && (h("button", { class: "button-secondary", onClick: this.quitCallback }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").quitGenexus))))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/splash"]; }
    get el() { return this; }
    static get style() { return splashCss; }
}, [1, "gx-ide-splash", {
        "appVersion": [1, "app-version"],
        "downloadDockerCallback": [16],
        "quitCallback": [16],
        "messages": [16],
        "openLogCallback": [16],
        "showQuitButton": [4, "show-quit-button"],
        "showOpenLogLink": [4, "show-open-log-link"],
        "showDockerMissingError": [4, "show-docker-missing-error"],
        "ariaBusy": [32]
    }]);
_GxIdeUiSplash_componentLocale = new WeakMap();
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-splash"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-splash":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeUiSplash);
            }
            break;
    } });
}

const GxIdeSplash = GxIdeUiSplash;
const defineCustomElement = defineCustomElement$1;

export { GxIdeSplash, defineCustomElement };

//# sourceMappingURL=gx-ide-splash.js.map