import { g as i, r as e, h as t, H as s, a } from "./p-9b9ccd0c.js";

import { g as o } from "./p-d42e842b.js";

import "./p-6534555e.js";

import "lit";

import "lit/directives/when.js";

import "lit/directives/if-defined.js";

import { L as r } from "./p-311eedf3.js";

const n = ':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 l = undefined && undefined.__classPrivateFieldGet || function(i, e, t, s) {
  if (t === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
  if (typeof e === "function" ? i !== e || !s : !e.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return t === "m" ? s : t === "a" ? s.call(i) : s ? s.value : e.get(i);
};

var d = undefined && undefined.__classPrivateFieldSet || function(i, e, t, s, a) {
  if (s === "m") throw new TypeError("Private method is not writable");
  if (s === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
  if (typeof e === "function" ? i !== e || !a : !e.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return s === "a" ? a.call(i, t) : a ? a.value = t : e.set(i, t), t;
};

var c, p, h, f, g, m, u, _, v, y, w, b, x, k, M, W, z;

const j = "active";

const T = "ArrowLeft";

const C = "ArrowRight";

const E = "Escape";

const L = 300;

const P = ".slide__word";

const R = 70;

const S = "slide__word--visible";

// icons
const A = i(`./gx-ide-assets/welcome-page/images/icon-next.svg`);

const B = o({
  category: "system",
  name: "close",
  colorType: "interactive"
});

const D = [ "resets/box-sizing", "utils/typography", "components/icon", "components/button" ];

const I = class {
  constructor(i) {
    e(this, i);
    /**
         * The component hard-coded strings translations.
         */
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        c.set(this, void 0);
    p.set(this, new Map);
    h.set(this, []);
    f.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.
        g.set(this, void 0);
    m.set(this, (() => {
      this.sliderVisible = false;
      setTimeout((() => {
        // wait until the slide disappears, then remove.
        this.el.remove();
        this.closeCallback();
        document.removeEventListener("keydown", l(this, y, "f"));
      }), L);
    }));
    u.set(this, (() => {
      l(this, x, "f").call(this);
      // listen to keydown events to navigate the slides with the arrows
            document.addEventListener("keydown", l(this, y, "f"));
    }));
    _.set(this, (i => {
      i.forEach(((i, e) => {
        setTimeout((() => {
          i.classList.add(S);
        }), e * R);
      }));
    }));
    v.set(this, (i => {
      this.userHasChangedSlide = true;
      const e = i.currentTarget;
      const t = parseInt(e.getAttribute("data-index"), 10);
      l(this, z, "f").call(this, t);
    }));
    y.set(this, (i => {
      this.userHasChangedSlide = true;
      const e = i.key === T && !this.slideTransitioning && !this.lastSlideReached && this.activeSlideIndex !== 0;
      const t = i.key === C && !this.slideTransitioning && !this.lastSlideReached;
      const s = i.key === E || i.key === C && !this.slideTransitioning && this.lastSlideReached;
      if (t) {
        l(this, w, "f").call(this);
      } else if (e) {
        l(this, b, "f").call(this);
      } else if (s) {
        l(this, m, "f").call(this);
      }
    }));
    w.set(this, (() => {
      const i = this.activeSlideIndex + 1;
      l(this, z, "f").call(this, i);
    }));
    b.set(this, (() => {
      const i = this.activeSlideIndex - 1;
      l(this, z, "f").call(this, i);
    }));
    x.set(this, (() => {
      // Clear any existing timeout
      if (l(this, g, "f")) {
        clearTimeout(l(this, g, "f"));
      }
      const i = this.transitionType === "auto" && !this.lastSlideReached && !this.userHasChangedSlide;
      if (!i) {
        return;
      }
      let e = 0;
      if (this.slides[this.activeSlideIndex].listItems) {
        const i = this.slides[this.activeSlideIndex].listItems.map((i => i.title + i.description));
        if (i.length) {
          const t = i.join("");
          e = t.split(" ").length;
        }
      }
      const t = this.slides[this.activeSlideIndex].description.join("");
      const s = t.split(" ").length;
      const a = l(this, k, "f").call(this, s + e);
      // Set a fresh timeout
            if (a) {
        d(this, g, setTimeout((() => {
          l(this, w, "f").call(this);
        }), a), "f");
      }
    }));
    k.set(this, ((i, e = this.wordsPerMinute) => {
      const t = i / e;
      const s = t * 6e4;
 // Convert minutes to milliseconds
            return s;
    }));
    M.set(this, (() => {
      d(this, h, this.slides.map(((i, e) => {
        var s, a;
        const o = e === this.slides.length - 1;
        return t("section", {
          class: "slide__wrapper",
          ref: i => l(this, f, "f")[e] = i
        }, t("div", {
          class: "slide__illustration",
          role: "img",
          "aria-label": l(this, c, "f").copyright.illustrationAriaLabel
        }, t("img", {
          class: "slide__illustration-img",
          src: i.illustration.url,
          alt: i.illustration.alt
        })), t("section", {
          class: "slide__copy"
        }, t("div", {
          class: "slide__copy-container"
        }, t("header", {
          class: "slide__copy-header"
        }, t("img", {
          src: A,
          alt: "GeneXus Next isologotype"
        }), t("h2", {
          class: "slide__copy-title heading-2"
        }, i.title)), t("div", {
          class: "slide__copy-description"
        }, (s = i.description) === null || s === void 0 ? void 0 : s.map((e => t("p", null, i.descriptionAsChunks ? l(this, W, "f").call(this, e) : e))), ((a = i.listItems) === null || a === void 0 ? void 0 : a.length) && t("ul", {
          class: "slide__list"
        }, i.listItems.map((i => t("li", {
          class: "slide__list-item"
        }, t("strong", {
          class: "slide__list-item-title"
        }, i.title), " ", i.description))))), o && t("button", {
          class: "button-primary start-button",
          onClick: l(this, m, "f")
        }, l(this, c, "f").startButtonCaption))));
      })), "f");
    }));
    W.set(this, (i => i.split(" ").map((i => t("span", {
      class: "slide__word"
    }, i, " ")))));
    z.set(this, (i => {
      this.slideTransitioning = true;
      // unset current active slide
            const e = l(this, f, "f")[this.activeSlideIndex];
      e.classList.remove(j);
      const t = l(this, f, "f")[i];
      const s = this.slides[i].descriptionAsChunks;
      const a = l(this, p, "f").get(i);
      let o;
      let r;
      let n = 0;
      if (s) {
        r = t.querySelectorAll(P);
        o = r.length;
        n = o * R;
      }
      this.lastSlideReached = i === this.slides.length - 1;
      // set new slide as active after fade out
            setTimeout((() => {
        t.classList.add(j);
        if (s && !a) {
          l(this, p, "f").set(i, true);
          l(this, _, "f").call(this, r);
          setTimeout((() => {
            this.slideTransitioning = false;
          }), n);
        } else {
          this.slideTransitioning = false;
        }
      }), L);
      // update active slide index
            this.activeSlideIndex = i;
      l(this, x, "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() {
    d(this, c, await r.getComponentStrings(this.el), "f");
    l(this, M, "f").call(this);
  }
  componentDidLoad() {
    l(this, f, "f")[this.activeSlideIndex].classList.add(j);
    this.sliderVisible = true;
    l(this, u, "f").call(this);
  }
  render() {
    return t(s, null, t("ch-theme", {
      model: D
    }), t("div", {
      class: {
        main: true,
        "main--visible": this.sliderVisible,
        "main--border-glow": this.lastSlideReached
      },
      style: {
        "--slide-fade-duration": `${L}ms`
      }
    }, t("section", {
      class: "slide"
    }, t("header", {
      class: "slide__header"
    }, t("button", {
      class: "button-tertiary button-icon-only close-icon",
      "aria-label": "close presentation",
      onClick: l(this, m, "f")
    }, t("ch-image", {
      class: "icon-m",
      src: B
    }))), t("div", {
      class: "slide__container"
    }, l(this, h, "f")), t("footer", {
      // slide common footer
      class: {
        slide__footer: true
      }
    }, t("div", {
      class: {
        "slide__footer-wrapper": true
      }
    }, t("ul", {
      class: "slide__dots",
      "aria-label": "Slide indicators"
    }, this.slides.map(((i, e) => t("li", {
      class: {
        slide__dot: true,
        "slide__dot-inactive": this.slideTransitioning,
        [j]: e === this.activeSlideIndex
      },
      "data-index": e,
      onClick: !this.slideTransitioning && l(this, v, "f")
    })))))))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/welcome-page" ];
  }
  get el() {
    return a(this);
  }
};

c = new WeakMap, p = new WeakMap, h = new WeakMap, f = new WeakMap, g = new WeakMap, 
m = new WeakMap, u = new WeakMap, _ = new WeakMap, v = new WeakMap, y = new WeakMap, 
w = new WeakMap, b = new WeakMap, x = new WeakMap, k = new WeakMap, M = new WeakMap, 
W = new WeakMap, z = new WeakMap;

I.style = n;

export { I as gx_ide_welcome_page };
//# sourceMappingURL=p-3ebc82f4.entry.js.map