import { g as getAssetPath, r as registerInstance, h, H as Host, a as getElement } from './index-b153bfd0.js';
import { g as getIconPath } from './assets-manager-7d6fc08f.js';
import './mer-animated-dots-7cbae6ef.js';
import 'lit';
import 'lit/directives/when.js';
import 'lit/directives/if-defined.js';
import { L as Locale } from './locale-e5107fad.js';

const welcomePageCss = ":host{--slide-header-block-padding:32px;--slide-footer-block:16px 64px;--slide-footer-block-last-slide:16px 40px;--slide-footer-navigation-hide-transition:var(--timing-fast);display:grid;block-size:100%;inline-size:100%;overflow:auto;padding:var(--spacing-padding-xxl);box-sizing:border-box;padding:var(--spacing-padding-xxxl)}.main{display:grid;place-self:center;inline-size:100%;max-inline-size:1100px;background-color:var(--color-accent-surface-elevation-1);border-radius:16px;overflow:hidden;border:1px solid var(--color-accent-surface-elevation-1);inset-block-start:0;transition:opacity var(--slide-fade-duration);opacity:0;pointer-events:none}.main--border-glow{animation:borderColorCycle 2s infinite}.main--visible{pointer-events:visible;opacity:1}.slide{display:grid;block-size:100%;grid-template-areas:\"header header\" \"slide-wrapper slide-wrapper\" \"footer footer\";grid-template-rows:max-content 1fr max-content}.slide__header{padding-inline:var(--spacing-padding-xl);padding-block:var(--spacing-padding-xxl) var(--spacing-padding-xxl);display:flex;flex-direction:row-reverse;grid-area:header}.slide__container{display:contents}.slide__wrapper{display:grid;column-gap:48px;grid-template-areas:\"header header\" \"illustration copy\" \"footer footer\";grid-template-rows:max-content 1fr max-content;grid-template-columns:1fr 1fr;grid-area:slide-wrapper;transition:opacity var(--timing-fast);padding-inline:48px;opacity:1;z-index:1}.slide__wrapper:not(.active){opacity:0;z-index:0;pointer-events:none}.slide__illustration{position:relative;overflow:hidden;display:grid;grid-area:illustration;place-items:center;inline-size:100%}.slide__illustration-img{object-fit:contain;block-size:100%;inline-size:100%}.slide__copy{grid-area:copy;place-self:center;justify-self:flex-start}.slide__copy-container{display:grid;gap:var(--spacing-gap-xl);max-inline-size:calc(256px * 2 + 12px)}.slide__copy-header{display:grid;gap:var(--spacing-gap-xl)}.slide__copy-title{letter-spacing:0.02em}.slide__copy-description{display:grid;gap:var(--spacing-gap-xl)}.slide__list{display:grid;gap:var(--spacing-gap-xl);list-style:none;padding:0;margin:0}.slide__word{transition:var(--timing-regular) opacity;opacity:0}.slide__word--visible{opacity:1}.slide__footer{grid-area:footer;display:grid;padding-block:var(--slide-footer-block);opacity:1}.slide__footer-last-slide{opacity:0;transition:calc(var(--timing-fast) + 200ms) opacity;pointer-events:none;animation:footerPaddingBlockLastSlide var(--timing-regular) ease-out forwards calc(var(--timing-fast) + 200ms)}.slide__footer-wrapper{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--spacing-gap-xl);align-items:center;justify-content:center;transition:var(--timing-regular) opacity;opacity:1}.slide__footer-wrapper-hidden{opacity:0}.slide__dots{display:grid;gap:var(--spacing-gap-xs);list-style:none;padding:0;margin:0;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center}.slide__dots-inactive{pointer-events:none}.slide__dot{display:grid;padding:var(--spacing-padding-m);cursor:pointer}.slide__dot::before{content:\"\";place-self:center;inline-size:12px;block-size:12px;border-radius:calc(12px / 2);background-color:var(--color-neutral-1500)}.slide__dot:hover::before{background-color:var(--color-icon-primary-hover)}.slide__dot.active{cursor:auto}.slide__dot.active::before{background-color:var(--color-accent-primary-default);cursor:auto}.slide__dot-inactive{pointer-events:none}.close-icon{transition:all var(--timing-fast)}.close-icon:hover{filter:brightness(1.5)}.close-icon ch-image{--ch-image-size:24px}.start-button{justify-self:start;margin-block-start:var(--spacing-padding-xxl)}@keyframes ellipseFadeInOut{0%{opacity:0.3}100%{opacity:0.7}}@keyframes ellipseRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes polygonRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes borderColorCycle{0%{border-color:var(--color-accent-surface-elevation-1)}50%{border-color:var(--color-primary-800)}100%{border-color:var(--color-accent-surface-elevation-1)}}@keyframes footerPaddingBlockLastSlide{0%{padding-block:var(--slide-footer-block)}100%{padding-block:var(--slide-footer-block-last-slide)}}.fade-out{animation:fadeOut var(--timing-regular) forwards var(--timing-fast)}";

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 _GxIdeWelcomePage_componentLocale, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, _GxIdeWelcomePage_slidesElements, _GxIdeWelcomePage_slidesElementsRef, _GxIdeWelcomePage_slideTimeOutId, _GxIdeWelcomePage_closeSlider, _GxIdeWelcomePage_initiateSlidesTransition, _GxIdeWelcomePage_displayWords, _GxIdeWelcomePage_dotClickedHandler, _GxIdeWelcomePage_keyboardEventHandler, _GxIdeWelcomePage_nextSlideHandler, _GxIdeWelcomePage_prevSlideHandler, _GxIdeWelcomePage_slideTimeOut, _GxIdeWelcomePage_secondsToRead, _GxIdeWelcomePage_renderSlides, _GxIdeWelcomePage_splitWords, _GxIdeWelcomePage_updateActiveSlide;
const ACTIVE_SLIDE_SELECTOR = "active";
const ARROW_LEFT_KEY = "ArrowLeft";
const ARROW_RIGHT_KEY = "ArrowRight";
const ESCAPE_KEY = "Escape";
const SLIDE_FADE_DURATION = 300;
const SLIDE_WORD_SELECTOR = ".slide__word";
const SLIDE_WORD_SELECTOR_TIMEOUT = 70;
const SLIDE_WORD_SELECTOR_VISIBLE = "slide__word--visible";
// icons
const ICON_NEXT = getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
const CLOSE_ICON = getIconPath({
    category: "system",
    name: "close",
    colorType: "interactive"
});
const CSS_BUNDLES = [
    "resets/box-sizing",
    "utils/typography",
    "components/icon",
    "components/button"
];
const GxIdeWelcomePage = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The component hard-coded strings translations.
         */
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeWelcomePage_componentLocale.set(this, void 0);
        _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed.set(this, new Map());
        _GxIdeWelcomePage_slidesElements.set(this, []);
        _GxIdeWelcomePage_slidesElementsRef.set(this, []);
        // #slidesDescriptionAsChunksAlreadyDisplayed is used to know if the description of a slide
        // that is set to be displayed as chunks, has already been displayed. Used to not display
        // as chunks after the first time.
        _GxIdeWelcomePage_slideTimeOutId.set(this, void 0);
        _GxIdeWelcomePage_closeSlider.set(this, () => {
            this.sliderVisible = false;
            setTimeout(() => {
                // wait until the slide disappears, then remove.
                this.el.remove();
                this.closeCallback();
                document.removeEventListener("keydown", __classPrivateFieldGet(this, _GxIdeWelcomePage_keyboardEventHandler, "f"));
            }, SLIDE_FADE_DURATION);
        });
        _GxIdeWelcomePage_initiateSlidesTransition.set(this, () => {
            __classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOut, "f").call(this);
            // listen to keydown events to navigate the slides with the arrows
            document.addEventListener("keydown", __classPrivateFieldGet(this, _GxIdeWelcomePage_keyboardEventHandler, "f"));
        });
        _GxIdeWelcomePage_displayWords.set(this, (wordsNodeList) => {
            wordsNodeList.forEach((word, index) => {
                setTimeout(() => {
                    word.classList.add(SLIDE_WORD_SELECTOR_VISIBLE);
                }, index * SLIDE_WORD_SELECTOR_TIMEOUT);
            });
        });
        _GxIdeWelcomePage_dotClickedHandler.set(this, (event) => {
            this.userHasChangedSlide = true;
            const itemClicked = event.currentTarget;
            const index = parseInt(itemClicked.getAttribute("data-index"), 10);
            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, index);
        });
        _GxIdeWelcomePage_keyboardEventHandler.set(this, (event) => {
            this.userHasChangedSlide = true;
            const goToPrevSlide = event.key === ARROW_LEFT_KEY &&
                !this.slideTransitioning &&
                !this.lastSlideReached &&
                this.activeSlideIndex !== 0;
            const goToNextSlide = event.key === ARROW_RIGHT_KEY &&
                !this.slideTransitioning &&
                !this.lastSlideReached;
            const closeSlider = event.key === ESCAPE_KEY ||
                (event.key === ARROW_RIGHT_KEY &&
                    !this.slideTransitioning &&
                    this.lastSlideReached);
            if (goToNextSlide) {
                __classPrivateFieldGet(this, _GxIdeWelcomePage_nextSlideHandler, "f").call(this);
            }
            else if (goToPrevSlide) {
                __classPrivateFieldGet(this, _GxIdeWelcomePage_prevSlideHandler, "f").call(this);
            }
            else if (closeSlider) {
                __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f").call(this);
            }
        });
        _GxIdeWelcomePage_nextSlideHandler.set(this, () => {
            const newIndex = this.activeSlideIndex + 1;
            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, newIndex);
        });
        _GxIdeWelcomePage_prevSlideHandler.set(this, () => {
            const newIndex = this.activeSlideIndex - 1;
            __classPrivateFieldGet(this, _GxIdeWelcomePage_updateActiveSlide, "f").call(this, newIndex);
        });
        _GxIdeWelcomePage_slideTimeOut.set(this, () => {
            // Clear any existing timeout
            if (__classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOutId, "f")) {
                clearTimeout(__classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOutId, "f"));
            }
            const autoChangeSlide = this.transitionType === "auto" &&
                !this.lastSlideReached &&
                !this.userHasChangedSlide;
            if (!autoChangeSlide) {
                return;
            }
            let itemsWordsCount = 0;
            if (this.slides[this.activeSlideIndex].listItems) {
                const itemsWords = this.slides[this.activeSlideIndex].listItems.map(item => {
                    return item.title + item.description;
                });
                if (itemsWords.length) {
                    const mergedItemsWords = itemsWords.join("");
                    itemsWordsCount = mergedItemsWords.split(" ").length;
                }
            }
            const mergedDescription = this.slides[this.activeSlideIndex].description.join("");
            const words = mergedDescription.split(" ").length;
            const timeBeforeNextSlide = __classPrivateFieldGet(this, _GxIdeWelcomePage_secondsToRead, "f").call(this, words + itemsWordsCount);
            // Set a fresh timeout
            if (timeBeforeNextSlide) {
                __classPrivateFieldSet(this, _GxIdeWelcomePage_slideTimeOutId, setTimeout(() => {
                    __classPrivateFieldGet(this, _GxIdeWelcomePage_nextSlideHandler, "f").call(this);
                }, timeBeforeNextSlide), "f");
            }
        });
        _GxIdeWelcomePage_secondsToRead.set(this, (wordsCount, wordsPerMinute = this.wordsPerMinute) => {
            const minutes = wordsCount / wordsPerMinute;
            const milliseconds = minutes * 60000; // Convert minutes to milliseconds
            return milliseconds;
        });
        _GxIdeWelcomePage_renderSlides.set(this, () => {
            __classPrivateFieldSet(this, _GxIdeWelcomePage_slidesElements, this.slides.map((slide, index) => {
                var _a, _b;
                const isLastSlide = index === this.slides.length - 1;
                return (h("section", { class: "slide__wrapper", ref: (el) => (__classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[index] = el) }, h("div", { class: "slide__illustration", role: "img", "aria-label": __classPrivateFieldGet(this, _GxIdeWelcomePage_componentLocale, "f").copyright.illustrationAriaLabel }, h("img", { class: "slide__illustration-img", src: slide.illustration.url, alt: slide.illustration.alt })), h("section", { class: "slide__copy" }, h("div", { class: "slide__copy-container" }, h("header", { class: "slide__copy-header" }, h("img", { src: ICON_NEXT, alt: "GeneXus Next isologotype" }), h("h2", { class: "slide__copy-title heading-2" }, slide.title)), h("div", { class: "slide__copy-description" }, (_a = slide.description) === null || _a === void 0 ? void 0 :
                    _a.map(paragraph => {
                        return (h("p", null, slide.descriptionAsChunks
                            ? __classPrivateFieldGet(this, _GxIdeWelcomePage_splitWords, "f").call(this, paragraph)
                            : paragraph));
                    }), ((_b = slide.listItems) === null || _b === void 0 ? void 0 : _b.length) && (h("ul", { class: "slide__list" }, slide.listItems.map(item => {
                    return (h("li", { class: "slide__list-item" }, h("strong", { class: "slide__list-item-title" }, item.title), " ", item.description));
                })))), isLastSlide && (h("button", { class: "button-primary start-button", onClick: __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f") }, __classPrivateFieldGet(this, _GxIdeWelcomePage_componentLocale, "f").startButtonCaption))))));
            }), "f");
        });
        _GxIdeWelcomePage_splitWords.set(this, (paragraph) => {
            return paragraph.split(" ").map(word => {
                // keep the space after {word} !
                return h("span", { class: "slide__word" }, word, " ");
            });
        });
        _GxIdeWelcomePage_updateActiveSlide.set(this, (newSlideIndex) => {
            this.slideTransitioning = true;
            // unset current active slide
            const activeSlide = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[this.activeSlideIndex];
            activeSlide.classList.remove(ACTIVE_SLIDE_SELECTOR);
            const nextSlideReference = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[newSlideIndex];
            const displayDescriptionAsChunks = this.slides[newSlideIndex].descriptionAsChunks;
            const descriptionAsChunksDisplayedAlready = __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, "f").get(newSlideIndex);
            let wordsCount;
            let wordsNodeList;
            let slideTimeOut = 0;
            if (displayDescriptionAsChunks) {
                wordsNodeList = nextSlideReference.querySelectorAll(SLIDE_WORD_SELECTOR);
                wordsCount = wordsNodeList.length;
                slideTimeOut = wordsCount * SLIDE_WORD_SELECTOR_TIMEOUT;
            }
            this.lastSlideReached = newSlideIndex === this.slides.length - 1;
            // set new slide as active after fade out
            setTimeout(() => {
                nextSlideReference.classList.add(ACTIVE_SLIDE_SELECTOR);
                if (displayDescriptionAsChunks && !descriptionAsChunksDisplayedAlready) {
                    __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed, "f").set(newSlideIndex, true);
                    __classPrivateFieldGet(this, _GxIdeWelcomePage_displayWords, "f").call(this, wordsNodeList);
                    setTimeout(() => {
                        this.slideTransitioning = false;
                    }, slideTimeOut);
                }
                else {
                    this.slideTransitioning = false;
                }
            }, SLIDE_FADE_DURATION);
            // update active slide index
            this.activeSlideIndex = newSlideIndex;
            __classPrivateFieldGet(this, _GxIdeWelcomePage_slideTimeOut, "f").call(this); // this has to be after this.#updateActiveSlide.
        });
        this.activeSlideIndex = 0;
        this.displaySlider = false;
        this.copyrightsVisible = true;
        this.lastSlideReached = false;
        this.sliderVisible = false;
        this.slideTransitioning = false;
        this.userHasChangedSlide = false;
        this.transitionType = "auto";
        this.wordsPerMinute = 250;
        this.closeCallback = undefined;
        this.slides = [];
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeWelcomePage_componentLocale, await Locale.getComponentStrings(this.el), "f");
        __classPrivateFieldGet(this, _GxIdeWelcomePage_renderSlides, "f").call(this);
    }
    componentDidLoad() {
        __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElementsRef, "f")[this.activeSlideIndex].classList.add(ACTIVE_SLIDE_SELECTOR);
        this.sliderVisible = true;
        __classPrivateFieldGet(this, _GxIdeWelcomePage_initiateSlidesTransition, "f").call(this);
    }
    render() {
        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: {
                "main": true,
                "main--visible": this.sliderVisible,
                "main--border-glow": this.lastSlideReached
            }, style: { "--slide-fade-duration": `${SLIDE_FADE_DURATION}ms` } }, h("section", { class: "slide" }, h("header", { class: "slide__header" }, h("button", { class: "button-tertiary button-icon-only close-icon", "aria-label": "close presentation", onClick: __classPrivateFieldGet(this, _GxIdeWelcomePage_closeSlider, "f") }, h("ch-image", { class: "icon-m", src: CLOSE_ICON }))), h("div", { class: "slide__container" }, __classPrivateFieldGet(this, _GxIdeWelcomePage_slidesElements, "f")), h("footer", {
            // slide common footer
            class: {
                slide__footer: true
            }
        }, h("div", { class: {
                "slide__footer-wrapper": true
            } }, h("ul", { class: "slide__dots", "aria-label": "Slide indicators" }, this.slides.map((_, index) => {
            return (h("li", { class: {
                    "slide__dot": true,
                    "slide__dot-inactive": this.slideTransitioning,
                    [ACTIVE_SLIDE_SELECTOR]: index === this.activeSlideIndex
                }, "data-index": index, onClick: !this.slideTransitioning && __classPrivateFieldGet(this, _GxIdeWelcomePage_dotClickedHandler, "f") }));
        }))))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/welcome-page"]; }
    get el() { return getElement(this); }
};
_GxIdeWelcomePage_componentLocale = new WeakMap(), _GxIdeWelcomePage_slidesDescriptionAsChunksAlreadyDisplayed = new WeakMap(), _GxIdeWelcomePage_slidesElements = new WeakMap(), _GxIdeWelcomePage_slidesElementsRef = new WeakMap(), _GxIdeWelcomePage_slideTimeOutId = new WeakMap(), _GxIdeWelcomePage_closeSlider = new WeakMap(), _GxIdeWelcomePage_initiateSlidesTransition = new WeakMap(), _GxIdeWelcomePage_displayWords = new WeakMap(), _GxIdeWelcomePage_dotClickedHandler = new WeakMap(), _GxIdeWelcomePage_keyboardEventHandler = new WeakMap(), _GxIdeWelcomePage_nextSlideHandler = new WeakMap(), _GxIdeWelcomePage_prevSlideHandler = new WeakMap(), _GxIdeWelcomePage_slideTimeOut = new WeakMap(), _GxIdeWelcomePage_secondsToRead = new WeakMap(), _GxIdeWelcomePage_renderSlides = new WeakMap(), _GxIdeWelcomePage_splitWords = new WeakMap(), _GxIdeWelcomePage_updateActiveSlide = new WeakMap();
GxIdeWelcomePage.style = welcomePageCss;

export { GxIdeWelcomePage as gx_ide_welcome_page };

//# sourceMappingURL=gx-ide-welcome-page.entry.js.map