🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

ajala.js

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ajala.js - npm Package Compare versions

Comparing version

0.3.10
to
0.3.11

779

dist/ajala.js

@@ -1,35 +0,35 @@

var X = Object.defineProperty;
var F = (h) => {
throw TypeError(h);
var Q = Object.defineProperty;
var B = (r) => {
throw TypeError(r);
};
var G = (h, t, i) => t in h ? X(h, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : h[t] = i;
var c = (h, t, i) => G(h, typeof t != "symbol" ? t + "" : t, i), R = (h, t, i) => t.has(h) || F("Cannot " + i);
var p = (h, t, i) => (R(h, t, "read from private field"), i ? i.call(h) : t.get(h)), C = (h, t, i) => t.has(h) ? F("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(h) : t.set(h, i), E = (h, t, i, e) => (R(h, t, "write to private field"), e ? e.call(h, i) : t.set(h, i), i), v = (h, t, i) => (R(h, t, "access private method"), i);
function U(h) {
var X = (r, t, i) => t in r ? Q(r, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[t] = i;
var p = (r, t, i) => X(r, typeof t != "symbol" ? t + "" : t, i), A = (r, t, i) => t.has(r) || B("Cannot " + i);
var _ = (r, t, i) => (A(r, t, "read from private field"), i ? i.call(r) : t.get(r)), S = (r, t, i) => t.has(r) ? B("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, i), C = (r, t, i, e) => (A(r, t, "write to private field"), e ? e.call(r, i) : t.set(r, i), i), v = (r, t, i) => (A(r, t, "access private method"), i);
function G(r) {
const t = /* @__PURE__ */ new Map(), i = [], e = [];
for (const n of h)
(n == null ? void 0 : n.order) === void 0 ? i.push(n) : (n == null ? void 0 : n.order) > h.length || (n == null ? void 0 : n.order) < 0 ? e.push(n) : t.set(n.order, n);
const s = new Array(h.length);
for (const s of r)
(s == null ? void 0 : s.order) === void 0 ? i.push(s) : (s == null ? void 0 : s.order) > r.length || (s == null ? void 0 : s.order) < 0 ? e.push(s) : t.set(s.order, s);
const n = new Array(r.length);
let a = 0, l = 0;
for (let n = 0; n < h.length; n++)
t.has(n) ? s[n] = t.get(n) : a < i.length ? s[n] = i[a++] : s[n] = e[l++];
return s.length === h.length ? s : s.slice(0, h.length);
for (let s = 0; s < r.length; s++)
t.has(s) ? n[s] = t.get(s) : a < i.length ? n[s] = i[a++] : n[s] = e[l++];
return n.length === r.length ? n : n.slice(0, r.length);
}
function z(h) {
function N(r) {
const t = {}, i = ["id", "data"];
for (let e = 0; e < h.length; e++) {
const s = h[e];
Object.keys(s).forEach((a) => {
for (let e = 0; e < r.length; e++) {
const n = r[e];
Object.keys(n).forEach((a) => {
if (!i.includes(a)) {
const l = s[a];
l && typeof l == "object" && Object.keys(l).forEach((n) => {
if (n === "default") return;
const l = n[a];
l && typeof l == "object" && Object.keys(l).forEach((s) => {
if (s === "default") return;
const o = {
id: s.id,
id: n.id,
key: a,
value: l[n],
media_query: n,
value: l[s],
media_query: s,
default: l.default
};
t[n] ? t[n].push(o) : t[n] = [o];
t[s] ? t[s].push(o) : t[s] = [o];
});

@@ -41,17 +41,17 @@ }

}
function M(h, t, i) {
const e = JSON.parse(JSON.stringify(h));
return t.forEach((s) => {
function I(r, t, i) {
const e = JSON.parse(JSON.stringify(r));
return t.forEach((n) => {
const a = e.findIndex(
(l) => (l == null ? void 0 : l.id) === s.id
(l) => (l == null ? void 0 : l.id) === n.id
);
a > -1 && (e[a][s.key] = s[i]);
}), U(e);
a > -1 && (e[a][n.key] = n[i]);
}), G(e);
}
function N(h, t) {
function z(r, t) {
let i = JSON.parse(
JSON.stringify(h)
JSON.stringify(r)
);
return Object.values(t).forEach((e) => {
e && (i = M(
e && (i = I(
i,

@@ -61,42 +61,42 @@ e,

));
}), U(i);
}), i;
}
const S = (h, t, i) => (i = Math.max(0, Math.min(1, i)), h + (t - h) * i);
function K(h, t) {
const T = (r, t, i) => (i = Math.max(0, Math.min(1, i)), r + (t - r) * i);
function K(r, t) {
let i = null;
return function(...e) {
i && clearTimeout(i), i = setTimeout(() => {
h(...e), clearTimeout(i), i = null;
r(...e), clearTimeout(i), i = null;
}, t);
};
}
function D(h) {
function R(r) {
const t = /* @__PURE__ */ new Set(), i = [];
for (let e = 0; e < h.length; e++) {
const s = h[e], a = `step-${e + Math.random()}`;
s.id ? t.has(s.id) ? (console.warn(
`Duplicate ajala step id found: ${s.id}. Please make sure all step ids are unique.`
), s.id = a) : t.add(s.id) : (s.id = a, console.warn(
for (let e = 0; e < r.length; e++) {
const n = r[e], a = `step-${e + Math.random()}`;
n.id ? t.has(n.id) ? (console.warn(
`Duplicate ajala step id found: ${n.id}. Please make sure all step ids are unique.`
), n.id = a) : t.add(n.id) : (n.id = a, console.warn(
`ajala step ${e} is missing an id. Please make sure all steps have unique ids.`
)), i.push(s);
)), i.push(n);
}
return i;
}
var T, W, V, J;
var F, U, W, V;
class tt {
constructor(t) {
C(this, T);
c(this, "ajala");
c(this, "tooltip_element");
c(this, "wrapper_element");
c(this, "tooltip_container_element");
c(this, "arrow_element");
c(this, "overlay_element");
c(this, "overlay_path");
c(this, "next_btn");
c(this, "prev_btn");
c(this, "close_btn");
c(this, "is_default_tooltip_element");
c(this, "navigation");
c(this, "placement");
S(this, F);
p(this, "ajala");
p(this, "tooltip_element");
p(this, "wrapper_element");
p(this, "tooltip_container_element");
p(this, "arrow_element");
p(this, "overlay_element");
p(this, "overlay_path");
p(this, "next_btn");
p(this, "prev_btn");
p(this, "close_btn");
p(this, "is_default_tooltip_element");
p(this, "navigation");
p(this, "placement");
this.ajala = t, this.wrapper_element = document.createElement("div"), this.is_default_tooltip_element = !1, this.tooltip_element = this.ajala.options.custom_tooltip || document.createElement("div"), this.tooltip_container_element = document.createElement("div"), this.overlay_element = document.createElementNS(

@@ -111,3 +111,3 @@ "http://www.w3.org/2000/svg",

init() {
var e, s, a, l, n, o, _, d, r, m;
var e, n, a, l, s, o, c, d, h, m;
this.tooltip_element = this.ajala.options.custom_tooltip || document.createElement("div"), this.tooltip_container_element = document.createElement("div"), this.next_btn = null, this.prev_btn = null, this.close_btn = null, this.overlay_path.addEventListener(

@@ -119,5 +119,5 @@ "click",

this.closeOnOverlayClickHandler
), this.ajala.options.custom_tooltip || v(this, T, W).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : v(this, T, V).call(this);
const t = (e = this.ajala.options.default_arrow_options) != null && e.size ? `${(s = this.ajala.options.default_arrow_options) == null ? void 0 : s.size}px` : "48px";
this.arrow_element.style.position = "absolute", this.arrow_element.style.width = t, this.arrow_element.style.height = t, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((a = this.ajala.options.default_arrow_options) == null ? void 0 : a.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (l = this.ajala.options.default_arrow_options) != null && l.hide || this.tooltip_container_element.appendChild(this.arrow_element), this.tooltip_container_element.style.position = "fixed", this.tooltip_container_element.style.top = "0px", this.tooltip_container_element.style.left = "0px", this.tooltip_container_element.style.zIndex = "20", this.tooltip_container_element.style.width = (n = this.ajala.options) != null && n.tooltip_width ? `${(o = this.ajala.options) == null ? void 0 : o.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (_ = this.ajala.options) != null && _.tooltip_height ? `${(d = this.ajala.options) == null ? void 0 : d.tooltip_height}px` : "180px", this.tooltip_container_element.style.pointerEvents = "auto", this.tooltip_container_element.classList.add("ajala_tooltip_container"), this.tooltip_container_element.appendChild(this.tooltip_element), this.tooltip_container_element.style.transform = "translate(0px, 0px)", this.wrapper_element.style.position = "fixed", this.wrapper_element.style.top = "0px", this.wrapper_element.style.left = "0px", this.wrapper_element.style.zIndex = "9999999", this.wrapper_element.classList.add("ajala"), this.wrapper_element.append(this.tooltip_container_element);
), this.ajala.options.custom_tooltip || v(this, F, U).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : v(this, F, W).call(this);
const t = (e = this.ajala.options.default_arrow_options) != null && e.size ? `${(n = this.ajala.options.default_arrow_options) == null ? void 0 : n.size}px` : "48px";
this.arrow_element.style.position = "absolute", this.arrow_element.style.width = t, this.arrow_element.style.height = t, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((a = this.ajala.options.default_arrow_options) == null ? void 0 : a.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (l = this.ajala.options.default_arrow_options) != null && l.hide || this.tooltip_container_element.appendChild(this.arrow_element), this.tooltip_container_element.style.position = "fixed", this.tooltip_container_element.style.top = "0px", this.tooltip_container_element.style.left = "0px", this.tooltip_container_element.style.zIndex = "20", this.tooltip_container_element.style.width = (s = this.ajala.options) != null && s.tooltip_width ? `${(o = this.ajala.options) == null ? void 0 : o.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (c = this.ajala.options) != null && c.tooltip_height ? `${(d = this.ajala.options) == null ? void 0 : d.tooltip_height}px` : "180px", this.tooltip_container_element.style.pointerEvents = "auto", this.tooltip_container_element.classList.add("ajala_tooltip_container"), this.tooltip_container_element.appendChild(this.tooltip_element), this.tooltip_container_element.style.transform = "translate(0px, 0px)", this.wrapper_element.style.position = "fixed", this.wrapper_element.style.top = "0px", this.wrapper_element.style.left = "0px", this.wrapper_element.style.zIndex = "9999999", this.wrapper_element.classList.add("ajala"), this.wrapper_element.append(this.tooltip_container_element);
const i = document.createElement("style");

@@ -140,33 +140,36 @@ i.innerHTML = `

`, document.head.appendChild(i), (typeof ((r = this.ajala.options.overlay_options) == null ? void 0 : r.hide) > "u" || !((m = this.ajala.options.overlay_options) != null && m.hide)) && (v(this, T, J).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay"));
`, document.head.appendChild(i), (typeof ((h = this.ajala.options.overlay_options) == null ? void 0 : h.hide) > "u" || !((m = this.ajala.options.overlay_options) != null && m.hide)) && (v(this, F, V).call(this), this.wrapper_element.append(this.overlay_element), document.body.classList.add("ajala_isOverlay"));
}
update(t) {
var n, o, _, d;
const { active_index: i, placement: e, taregt_el: s } = t, a = this.ajala.options.default_tooltip_options;
var e, n, a, l;
const i = this.ajala.options.default_tooltip_options;
if (this.is_default_tooltip_element) {
if (!(a != null && a.hide_dot_nav)) {
const r = document.querySelectorAll(".ajala_dot_nav");
r.forEach((m) => {
m.classList.remove("ajala_dot_nav_active");
}), r[this.ajala.getActiveStepFlattenIndex()].classList.add(
"ajala_dot_nav_active"
);
if (!(i != null && i.hide_dot_nav)) {
const o = this.ajala.getFlattenSteps().map((d, h) => {
const m = document.createElement("div");
return m.classList.add("ajala_dot_nav"), h === this.ajala.getActiveStepFlattenIndex() && m.classList.add("ajala_dot_nav_active"), m;
}), c = this.wrapper_element.querySelector(".ajala_dot_navs");
c && c.replaceChildren(...o);
}
if (!(a != null && a.hide_title)) {
const r = document.querySelector(".ajala_title");
r && (r.innerText = ((n = this.ajala.active_step) == null ? void 0 : n.title) ?? "");
if (!(i != null && i.hide_title)) {
const s = document.querySelector(".ajala_title");
s && (s.innerText = ((e = this.ajala.active_step) == null ? void 0 : e.title) ?? "");
}
if (!(a != null && a.hide_content)) {
const r = document.querySelector(".ajala_content");
r && (r.innerText = ((o = this.ajala.active_step) == null ? void 0 : o.content) ?? "");
if (!(i != null && i.hide_content)) {
const s = document.querySelector(".ajala_content");
s && (s.innerText = ((n = this.ajala.active_step) == null ? void 0 : n.content) ?? "");
}
this.next_btn && (this.next_btn.innerText = "Next");
}
if ((((_ = this.ajala.active_step) == null ? void 0 : _.enable_target_interaction) ?? ((d = this.ajala.options) == null ? void 0 : d.enable_target_interaction)) && s && s.classList.add("ajala_target_interactive"), this.ajala.flatten_steps.length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), s) {
const { x: r, y: m, rotate: u } = this.placement.arrow.calculatePlacmentDelta({
active_index: i,
placement: e
});
this.arrow_element.style.visibility = "visible", this.arrow_element.style.transform = `translate(${r}px, ${m}px) rotate(${u}deg)`;
} else
this.arrow_element.style.visibility = "hidden";
if (t) {
const { active_index: s, placement: o, taregt_el: c } = t;
if ((((a = this.ajala.active_step) == null ? void 0 : a.enable_target_interaction) ?? ((l = this.ajala.options) == null ? void 0 : l.enable_target_interaction)) && c && c.classList.add("ajala_target_interactive"), this.ajala.getFlattenSteps().length - 1 === this.ajala.getActiveStepFlattenIndex() && this.next_btn && (this.next_btn.innerText = "Finish"), c) {
const { x: h, y: m, rotate: g } = this.placement.arrow.calculatePlacmentDelta({
active_index: s,
placement: o
});
this.arrow_element.style.visibility = "visible", this.arrow_element.style.transform = `translate(${h}px, ${m}px) rotate(${g}deg)`;
} else
this.arrow_element.style.visibility = "hidden";
}
}

@@ -177,3 +180,3 @@ updateOverlayCutoutPathData({

height: e,
width: s,
width: n,
border_radius: a

@@ -183,7 +186,7 @@ }) {

M${t + a},${i}
h${Math.max(s - 2 * a, 0)}
h${Math.max(n - 2 * a, 0)}
a${a},${a} 0 0 1 ${a},${a}
v${Math.max(e - 2 * a, 0)}
a${a},${a} 0 0 1 -${a},${a}
h-${Math.max(s - 2 * a, 0)}
h-${Math.max(n - 2 * a, 0)}
a${a},${a} 0 0 1 -${a},-${a}

@@ -193,7 +196,7 @@ v-${Math.max(e - 2 * a, 0)}

z
`, n = `
`, s = `
M${window.innerWidth},0 L0,0 L0,${window.innerHeight} L${window.innerWidth},${window.innerHeight} L${window.innerWidth},0 Z
${l}
`;
this.overlay_path.setAttribute("d", n);
this.overlay_path.setAttribute("d", s);
}

@@ -209,3 +212,3 @@ resetOverlayCutoutSvgRect() {

const t = this.getTargetElement(
this.ajala.flatten_steps[this.ajala.getActiveStepFlattenIndex()].target
this.ajala.getFlattenSteps()[this.ajala.getActiveStepFlattenIndex()].target
);

@@ -224,3 +227,3 @@ t && t.classList.remove("ajala_target_interactive");

start() {
var i, e, s;
var i, e, n;
this.wrapper_element.remove(), document.body.classList.remove("ajala_active"), document.body.style.overflow = "hidden", this.ajala.dispatchEvent({

@@ -244,3 +247,3 @@ type: "onBeforeDomInsert",

const t = this.tooltip_container_element.getBoundingClientRect();
this.tooltip_container_element.style.transform = `translate(-${t.width}px, 0px)`, this.resetOverlayCutoutSvgRect(), this.next_btn && (this.next_btn.innerText = "Next"), this.navigation && ((i = this.next_btn) == null || i.addEventListener("click", this.navigation.next), (e = this.prev_btn) == null || e.addEventListener("click", this.navigation.prev), (s = this.close_btn) == null || s.addEventListener("click", this.navigation.close));
this.tooltip_container_element.style.transform = `translate(-${t.width}px, 0px)`, this.resetOverlayCutoutSvgRect(), this.next_btn && (this.next_btn.innerText = "Next"), this.navigation && ((i = this.next_btn) == null || i.addEventListener("click", this.navigation.next), (e = this.prev_btn) == null || e.addEventListener("click", this.navigation.prev), (n = this.close_btn) == null || n.addEventListener("click", this.navigation.close));
}

@@ -286,4 +289,4 @@ closeOnOverlayClickHandler() {

}
T = new WeakSet(), W = function() {
var e, s, a, l, n, o;
F = new WeakSet(), U = function() {
var n, a, l, s, o, c;
this.is_default_tooltip_element = !0;

@@ -293,3 +296,4 @@ const t = this.ajala.options.default_tooltip_options;

let i = "";
for (let _ = 0; _ < this.ajala.original_steps.length; _++)
const e = this.ajala.getFlattenSteps().length;
for (let d = 0; d < e; d++)
i = `${i} <div class="ajala_dot_nav"></div>

@@ -318,5 +322,5 @@ `;

</div>
<h3 class="ajala_title">${(e = this.ajala.active_step) == null ? void 0 : e.title}</h3>
<h3 class="ajala_title">${(n = this.ajala.active_step) == null ? void 0 : n.title}</h3>
<p class="ajala_content">
${(s = this.ajala.active_step) == null ? void 0 : s.content}
${(a = this.ajala.active_step) == null ? void 0 : a.content}
</p>

@@ -326,4 +330,4 @@ <div class="ajala_footer">

<button class="ajala_btn_next">Next</button>
</div>`, this.next_btn = this.tooltip_element.querySelector(".ajala_btn_next"), this.prev_btn = this.tooltip_element.querySelector(".ajala_btn_prev"), this.close_btn = this.tooltip_element.querySelector(".ajala_close_btn"), t != null && t.class_name && this.tooltip_element.classList.add(t.class_name), t != null && t.hide_dot_nav && ((a = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || a.remove()), t != null && t.hide_title && ((l = this.tooltip_element.querySelector(".ajala_title")) == null || l.remove()), t != null && t.hide_content && ((n = this.tooltip_element.querySelector(".ajala_content")) == null || n.remove()), t != null && t.hide_close_btn && ((o = this.close_btn) == null || o.remove());
}, V = function() {
</div>`, this.next_btn = this.tooltip_element.querySelector(".ajala_btn_next"), this.prev_btn = this.tooltip_element.querySelector(".ajala_btn_prev"), this.close_btn = this.tooltip_element.querySelector(".ajala_close_btn"), t != null && t.class_name && this.tooltip_element.classList.add(t.class_name), t != null && t.hide_dot_nav && ((l = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || l.remove()), t != null && t.hide_title && ((s = this.tooltip_element.querySelector(".ajala_title")) == null || s.remove()), t != null && t.hide_content && ((o = this.tooltip_element.querySelector(".ajala_content")) == null || o.remove()), t != null && t.hide_close_btn && ((c = this.close_btn) == null || c.remove());
}, W = function() {
var i, e;

@@ -334,5 +338,5 @@ const t = (i = this.ajala.options.default_arrow_options) != null && i.size ? `${(e = this.ajala.options.default_arrow_options) == null ? void 0 : e.size}px` : "48px";

`;
}, J = function() {
var e, s, a;
const t = ((s = (e = this.ajala.options.overlay_options) == null ? void 0 : e.opacity) == null ? void 0 : s.toString()) || " 0.7", i = ((a = this.ajala.options.overlay_options) == null ? void 0 : a.color) || " black";
}, V = function() {
var e, n, a;
const t = ((n = (e = this.ajala.options.overlay_options) == null ? void 0 : e.opacity) == null ? void 0 : n.toString()) || " 0.7", i = ((a = this.ajala.options.overlay_options) == null ? void 0 : a.color) || " black";
this.overlay_element.setAttribute("xmlns", "http://www.w3.org/2000/svg"), this.overlay_element.style.position = "fixed", this.overlay_element.style.zIndex = "10", this.overlay_element.style.top = "0px", this.overlay_element.style.left = "0px", this.overlay_element.style.width = "100vw", this.overlay_element.style.height = "100vh", this.overlay_element.style.pointerEvents = "none", this.overlay_element.classList.add("ajala_overlay"), this.overlay_path.style.pointerEvents = "auto", this.updateOverlayCutoutPathData({

@@ -348,6 +352,6 @@ x: 0,

constructor({ ajala: t, ui: i }) {
c(this, "ajala");
c(this, "ui");
c(this, "placement");
c(this, "animations");
p(this, "ajala");
p(this, "ui");
p(this, "placement");
p(this, "animations");
this.ajala = t, this.ui = i, this.next = this.next.bind(this), this.prev = this.prev.bind(this), this.close = this.close.bind(this);

@@ -361,10 +365,10 @@ }

if (!((i = this.animations) != null && i.is_animating)) {
if ((e = this.ajala.flatten_steps[t]) != null && e.skip) {
if ((e = this.ajala.getFlattenSteps()[t]) != null && e.skip) {
console.warn("You can't go to an ajala step that's meant to be skipped");
return;
}
if (t >= 0 && t <= this.ajala.flatten_steps.length) {
if (t >= 0 && t <= this.ajala.getFlattenSteps().length) {
this.animations.is_animating = !0, this.ui.resetOverlayCutoutSvgRect();
const s = await this.placement.tooltip.calculateTravelDistance(t), a = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.flatten_steps[s.active_index], this.ui.update(s), this.ajala.dispatchEvent({
const n = await this.placement.tooltip.calculateTravelDistance(t), a = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[n.active_index], this.ui.update(n), this.ajala.dispatchEvent({
type: "onTransitionComplete",

@@ -378,3 +382,3 @@ data: {

this.animations.transition[this.animations.transition_type](
s,
n,
{

@@ -390,3 +394,3 @@ onComplete: a

let t = this.ajala.getActiveStepFlattenIndex() + 1;
if (t = this.getValidNavIndex(t, "next"), this.ajala.flatten_steps.length > t) {
if (t = this.getValidNavIndex(t, "next"), this.ajala.getFlattenSteps().length > t) {
this.animations.is_animating = !0, this.ajala.dispatchEvent({

@@ -397,3 +401,3 @@ type: "onNext",

const i = await this.placement.tooltip.calculateTravelDistance(t), e = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.flatten_steps[i.active_index], this.ui.update(i), this.ajala.dispatchEvent({
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[i.active_index], this.ui.update(i), this.ajala.dispatchEvent({
type: "onTransitionComplete",

@@ -427,3 +431,3 @@ data: {

const i = await this.placement.tooltip.calculateTravelDistance(t), e = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.flatten_steps[i.active_index], this.ui.update(i), this.ajala.dispatchEvent({
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.getFlattenSteps()[i.active_index], this.ui.update(i), this.ajala.dispatchEvent({
type: "onTransitionComplete",

@@ -445,10 +449,10 @@ data: {

getValidNavIndex(t, i) {
const e = this.ajala.flatten_steps[t];
let s = t;
const e = this.ajala.getFlattenSteps()[t];
let n = t;
if (i === "next" && (e != null && e.skip)) {
s = this.ajala.flatten_steps.length;
for (let a = t; a < this.ajala.flatten_steps.length; a++) {
const l = this.ajala.flatten_steps[a];
n = this.ajala.getFlattenSteps().length;
for (let a = t; a < this.ajala.getFlattenSteps().length; a++) {
const l = this.ajala.getFlattenSteps()[a];
if (!(l != null && l.skip)) {
s = a;
n = a;
break;

@@ -458,7 +462,7 @@ }

} else if (i === "prev" && (e != null && e.skip)) {
s = -1;
n = -1;
for (let a = t; a > 0; a--) {
const l = this.ajala.flatten_steps[a];
const l = this.ajala.getFlattenSteps()[a];
if (!(l != null && l.skip)) {
s = a;
n = a;
break;

@@ -468,3 +472,3 @@ }

}
return s;
return n;
}

@@ -480,3 +484,3 @@ close() {

const t = this.getValidNavIndex(0, "next");
this.ajala.flatten_steps.length > t ? this.goTo(t) : (this.ajala.dispatchEvent({
this.ajala.getFlattenSteps().length > t ? this.goTo(t) : (this.ajala.dispatchEvent({
type: "onFinish",

@@ -492,3 +496,3 @@ data: this.ajala

constructor() {
c(this, "_listeners");
p(this, "_listeners");
}

@@ -515,6 +519,6 @@ /**

if (e === void 0) return;
const s = e[t];
if (s !== void 0) {
const a = s.indexOf(i);
a !== -1 && s.splice(a, 1);
const n = e[t];
if (n !== void 0) {
const a = n.indexOf(i);
a !== -1 && n.splice(a, 1);
}

@@ -532,9 +536,9 @@ }

if (e !== void 0) {
const s = e.slice(0);
for (let a = 0, l = s.length; a < l; a++)
s[a].call(this, t);
const n = e.slice(0);
for (let a = 0, l = n.length; a < l; a++)
n[a].call(this, t);
}
}
}
var O;
var $;
class at {

@@ -546,6 +550,6 @@ constructor({

}) {
c(this, "ajala");
c(this, "placement");
C(this, O);
this.ajala = t, E(this, O, i), this.placement = e;
p(this, "ajala");
p(this, "placement");
S(this, $);
this.ajala = t, C(this, $, i), this.placement = e;
}

@@ -560,7 +564,7 @@ calculatePlacmentDelta({

rotate: 0
}, s = p(this, O).getTargetElement(
this.ajala.flatten_steps[t].target
}, n = _(this, $).getTargetElement(
this.ajala.getFlattenSteps()[t].target
);
if (!s) return e;
const a = s.getBoundingClientRect(), l = p(this, O).arrow_element.getBoundingClientRect(), n = p(this, O).tooltip_container_element.getBoundingClientRect(), { axis: o, align: _ } = this.placement.getMetadata({
if (!n) return e;
const a = n.getBoundingClientRect(), l = _(this, $).arrow_element.getBoundingClientRect(), s = _(this, $).tooltip_container_element.getBoundingClientRect(), { axis: o, align: c } = this.placement.getMetadata({
next_index: t,

@@ -570,26 +574,26 @@ placement: i

if (o === "top" || o === "bottom") {
if (_ === "left") {
let r = S(0, n.width, 0.05);
a.width < n.width / 2 && (r = -l.width / 2 + a.width / 2), e.x = r;
} else if (_ === "center") {
let r = S(0, n.width, 0.5);
r = r - l.width / 2, e.x = r;
} else if (_ === "right") {
let r = S(0, n.width, 0.95);
r = r - l.width, a.width < n.width / 2 && (r = n.width - l.width / 2 - a.width / 2), e.x = r;
if (c === "left") {
let h = T(0, s.width, 0.05);
a.width < s.width / 2 && (h = -l.width / 2 + a.width / 2), e.x = h;
} else if (c === "center") {
let h = T(0, s.width, 0.5);
h = h - l.width / 2, e.x = h;
} else if (c === "right") {
let h = T(0, s.width, 0.95);
h = h - l.width, a.width < s.width / 2 && (h = s.width - l.width / 2 - a.width / 2), e.x = h;
}
o === "top" ? (e.rotate = 180, e.y = n.height - l.height / 2 + d) : o === "bottom" && (e.rotate = 0, e.y = -(l.height / 2) - d);
o === "top" ? (e.rotate = 180, e.y = s.height - l.height / 2 + d) : o === "bottom" && (e.rotate = 0, e.y = -(l.height / 2) - d);
}
if (o === "left" || o === "right") {
if (_ === "top") {
let r = S(0, n.height, 0.1);
a.height < n.height / 2 && (r = -l.height / 2 + a.height / 2), e.y = r;
} else if (_ === "center") {
let r = S(0, n.height, 0.5);
r = r - l.height / 2, e.y = r;
} else if (_ === "bottom") {
let r = S(0, n.height, 0.9);
r = r - l.height, a.height < n.height / 2 && (r = n.height - l.height / 2 - a.height / 2), e.y = r;
if (c === "top") {
let h = T(0, s.height, 0.1);
a.height < s.height / 2 && (h = -l.height / 2 + a.height / 2), e.y = h;
} else if (c === "center") {
let h = T(0, s.height, 0.5);
h = h - l.height / 2, e.y = h;
} else if (c === "bottom") {
let h = T(0, s.height, 0.9);
h = h - l.height, a.height < s.height / 2 && (h = s.height - l.height / 2 - a.height / 2), e.y = h;
}
o === "left" ? (e.rotate = 90, e.x = n.width - l.width / 2 + d) : o === "right" && (e.rotate = -90, e.x = -(l.width / 2) - d);
o === "left" ? (e.rotate = 90, e.x = s.width - l.width / 2 + d) : o === "right" && (e.rotate = -90, e.x = -(l.width / 2) - d);
}

@@ -601,5 +605,5 @@ return e;

}
O = new WeakMap();
var y, A, H, P, q;
class st {
$ = new WeakMap();
var w, M, D, H, P;
class nt {
constructor({

@@ -610,16 +614,16 @@ ajala: t,

}) {
C(this, y);
c(this, "ajala");
c(this, "placement");
c(this, "ui");
S(this, w);
p(this, "ajala");
p(this, "placement");
p(this, "ui");
this.ajala = t, this.ui = i, this.placement = e;
}
async calculateTravelDistance(t) {
var g, x;
var f, j;
let i = !1;
this.ui.arrow_element.style.visibility = "hidden";
const e = this.ui.getTargetElement(
this.ajala.flatten_steps[t].target
), s = this.ui.tooltip_container_element;
let a = s.getBoundingClientRect();
this.ajala.getFlattenSteps()[t].target
), n = this.ui.tooltip_container_element;
let a = n.getBoundingClientRect();
const l = (b) => b > 0 ? -b : Math.abs(b);

@@ -640,20 +644,20 @@ if (!e)

};
let n = e.getBoundingClientRect();
const o = this.ajala.flatten_steps[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0;
let _ = l(a.y), d = l(a.x), r = n.y + o, m = n.x + o;
(n.y < 0 || n.y > window.innerHeight || n.y + n.height > window.innerHeight || r < 0 || r > window.innerHeight || r + a.height > window.innerHeight || r + a.height < 0) && (((g = this.placement.animations) == null ? void 0 : g.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((x = this.placement.animations) == null ? void 0 : x.scrollToLocation(
let s = e.getBoundingClientRect();
const o = this.ajala.getFlattenSteps()[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0;
let c = l(a.y), d = l(a.x), h = s.y + o, m = s.x + o;
(s.y < 0 || s.y > window.innerHeight || s.y + s.height > window.innerHeight || h < 0 || h > window.innerHeight || h + a.height > window.innerHeight || h + a.height < 0) && (((f = this.placement.animations) == null ? void 0 : f.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((j = this.placement.animations) == null ? void 0 : j.scrollToLocation(
e,
t
)), i = !0, n = e.getBoundingClientRect(), a = s.getBoundingClientRect(), _ = l(a.y), d = l(a.x));
const u = this.calculatePlacementDelta({
)), i = !0, s = e.getBoundingClientRect(), a = n.getBoundingClientRect(), c = l(a.y), d = l(a.x));
const g = this.calculatePlacementDelta({
target: e,
next_index: t
});
return m = u.x_delta, r = u.y_delta, {
y_delta: r,
return m = g.x_delta, h = g.y_delta, {
y_delta: h,
x_delta: m,
y_offset: _,
y_offset: c,
x_offset: d,
tooltip_rect: a,
target_rect: n,
target_rect: s,
taregt_el: e,

@@ -663,3 +667,3 @@ active_index: t,

scrolled: i,
placement: u.placement
placement: g.placement
};

@@ -671,54 +675,54 @@ }

}) {
let e = 0, s = 0, a = "auto";
let e = 0, n = 0, a = "auto";
const {
axis: l,
align: n,
align: s,
axis_gutter: o,
spotlight: _,
spotlight: c,
placement: d
} = this.placement.getMetadata({ next_index: i }), r = v(this, y, H).call(this, {
} = this.placement.getMetadata({ next_index: i }), h = v(this, w, D).call(this, {
axis: l,
target: t,
axis_gutter: o,
spotlight_padding: _.padding
}), m = v(this, y, P).call(this, {
align: n,
spotlight_padding: c.padding
}), m = v(this, w, H).call(this, {
align: s,
target: t
}), u = v(this, y, q).call(this, {
align: n,
}), g = v(this, w, P).call(this, {
align: s,
target: t
});
if (l === "top" || l === "bottom")
if (u.is_valid && r.is_valid)
e = u.alignment, s = r.axis, a = d;
if (g.is_valid && h.is_valid)
e = g.alignment, n = h.axis, a = d;
else {
const { auto_x_delta: g, auto_y_delta: x, auto_placement: b } = v(this, y, A).call(this, {
const { auto_x_delta: f, auto_y_delta: j, auto_placement: b } = v(this, w, M).call(this, {
target: t,
axis_gutter: o,
spotlight_padding: _.padding
spotlight_padding: c.padding
});
e = g, s = x, a = b;
e = f, n = j, a = b;
}
else if (l === "left" || l === "right")
if (m.is_valid && r.is_valid)
e = r.axis, s = m.alignment, a = d;
if (m.is_valid && h.is_valid)
e = h.axis, n = m.alignment, a = d;
else {
const { auto_x_delta: g, auto_y_delta: x, auto_placement: b } = v(this, y, A).call(this, {
const { auto_x_delta: f, auto_y_delta: j, auto_placement: b } = v(this, w, M).call(this, {
target: t,
axis_gutter: o,
spotlight_padding: _.padding
spotlight_padding: c.padding
});
e = g, s = x, a = b;
e = f, n = j, a = b;
}
else {
const { auto_x_delta: g, auto_y_delta: x, auto_placement: b } = v(this, y, A).call(this, {
const { auto_x_delta: f, auto_y_delta: j, auto_placement: b } = v(this, w, M).call(this, {
target: t,
axis_gutter: o,
spotlight_padding: _.padding
spotlight_padding: c.padding
});
e = g, s = x, a = b;
e = f, n = j, a = b;
}
return {
x_delta: e,
y_delta: s,
y_delta: n,
placement: a

@@ -730,3 +734,3 @@ };

}
y = new WeakSet(), A = function({
w = new WeakSet(), M = function({
target: t,

@@ -736,3 +740,3 @@ axis_gutter: i,

}) {
const s = [
const n = [
"bottom_center",

@@ -751,6 +755,6 @@ "bottom_right",

];
let a = 0, l = 0, n = "bottom_center";
for (let o = 0; o < s.length; o++) {
n = s[o];
const _ = n.split("_"), d = _[0], r = _[1], m = v(this, y, H).call(this, {
let a = 0, l = 0, s = "bottom_center";
for (let o = 0; o < n.length; o++) {
s = n[o];
const c = s.split("_"), d = c[0], h = c[1], m = v(this, w, D).call(this, {
axis: d,

@@ -760,18 +764,18 @@ target: t,

spotlight_padding: e
}), u = v(this, y, P).call(this, {
align: r,
}), g = v(this, w, H).call(this, {
align: h,
target: t
}), g = v(this, y, q).call(this, {
align: r,
}), f = v(this, w, P).call(this, {
align: h,
target: t
});
if ((d === "bottom" || d === "top") && m.is_valid && g.is_valid) {
a = g.alignment, l = m.axis;
if ((d === "bottom" || d === "top") && m.is_valid && f.is_valid) {
a = f.alignment, l = m.axis;
break;
}
if ((d === "right" || d === "left") && m.is_valid && u.is_valid) {
a = m.axis, l = u.alignment;
if ((d === "right" || d === "left") && m.is_valid && g.is_valid) {
a = m.axis, l = g.alignment;
break;
}
o === s.length - 1 && (l = m.axis, a = g.alignment);
o === n.length - 1 && (l = m.axis, a = f.alignment);
}

@@ -781,11 +785,11 @@ return {

auto_y_delta: l,
auto_placement: n
auto_placement: s
};
}, H = function({
}, D = function({
axis: t,
target: i,
axis_gutter: e,
spotlight_padding: s
spotlight_padding: n
}) {
const a = i.getBoundingClientRect(), l = this.ui.tooltip_container_element.getBoundingClientRect(), n = {
const a = i.getBoundingClientRect(), l = this.ui.tooltip_container_element.getBoundingClientRect(), s = {
is_valid: !1,

@@ -795,54 +799,54 @@ axis: 0

if (t === "top") {
const o = a.y - l.height - e - s;
o >= 0 && a.y <= window.innerHeight ? (n.is_valid = !0, n.axis = o) : (n.is_valid = !1, n.axis = o);
const o = a.y - l.height - e - n;
o >= 0 && a.y <= window.innerHeight ? (s.is_valid = !0, s.axis = o) : (s.is_valid = !1, s.axis = o);
}
if (t === "bottom") {
const o = a.bottom + e + s;
o + l.height >= 0 && o + l.height <= window.innerHeight ? (n.is_valid = !0, n.axis = o) : (n.is_valid = !1, n.axis = o);
const o = a.bottom + e + n;
o + l.height >= 0 && o + l.height <= window.innerHeight ? (s.is_valid = !0, s.axis = o) : (s.is_valid = !1, s.axis = o);
}
if (t === "left") {
const o = a.x - l.width - e - s;
o >= 0 && a.x <= window.innerWidth ? (n.is_valid = !0, n.axis = o) : (n.is_valid = !1, n.axis = o);
const o = a.x - l.width - e - n;
o >= 0 && a.x <= window.innerWidth ? (s.is_valid = !0, s.axis = o) : (s.is_valid = !1, s.axis = o);
}
if (t === "right") {
const o = a.right + e + s;
o >= 0 && o + l.width <= window.innerWidth ? (n.is_valid = !0, n.axis = o) : (n.is_valid = !1, n.axis = o);
const o = a.right + e + n;
o >= 0 && o + l.width <= window.innerWidth ? (s.is_valid = !0, s.axis = o) : (s.is_valid = !1, s.axis = o);
}
return n;
}, P = function({
return s;
}, H = function({
align: t,
target: i
}) {
const e = i.getBoundingClientRect(), s = this.ui.tooltip_container_element.getBoundingClientRect(), a = {
const e = i.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), a = {
is_valid: !1,
alignment: 0
};
if (t === "top" && (e.y + s.height <= window.innerHeight && e.y >= 0 ? (a.is_valid = !0, a.alignment = e.y) : (a.is_valid = !1, a.alignment = e.y)), t === "center") {
const l = e.height / 2, n = s.height / 2, o = e.y + l - n;
if (t === "top" && (e.y + n.height <= window.innerHeight && e.y >= 0 ? (a.is_valid = !0, a.alignment = e.y) : (a.is_valid = !1, a.alignment = e.y)), t === "center") {
const l = e.height / 2, s = n.height / 2, o = e.y + l - s;
o + e.height <= window.innerHeight && o >= 0 ? (a.is_valid = !0, a.alignment = o) : (a.is_valid = !1, a.alignment = o);
}
if (t === "bottom") {
const l = e.bottom - s.height;
l + s.height <= window.innerHeight && l >= 0 ? (a.is_valid = !0, a.alignment = l) : (a.is_valid = !1, a.alignment = l);
const l = e.bottom - n.height;
l + n.height <= window.innerHeight && l >= 0 ? (a.is_valid = !0, a.alignment = l) : (a.is_valid = !1, a.alignment = l);
}
return a;
}, q = function({
}, P = function({
align: t,
target: i
}) {
const e = i.getBoundingClientRect(), s = this.ui.tooltip_container_element.getBoundingClientRect(), a = {
const e = i.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), a = {
is_valid: !1,
alignment: 0
};
if (t === "left" && (e.x + s.width <= window.innerWidth && e.x >= 0 ? (a.is_valid = !0, a.alignment = e.x) : (a.is_valid = !1, a.alignment = e.x)), t === "center") {
const l = e.width / 2, n = s.width / 2, o = e.x + l - n;
o >= 0 && o + s.width <= window.innerWidth ? (a.is_valid = !0, a.alignment = o) : (a.is_valid = !1, a.alignment = o);
if (t === "left" && (e.x + n.width <= window.innerWidth && e.x >= 0 ? (a.is_valid = !0, a.alignment = e.x) : (a.is_valid = !1, a.alignment = e.x)), t === "center") {
const l = e.width / 2, s = n.width / 2, o = e.x + l - s;
o >= 0 && o + n.width <= window.innerWidth ? (a.is_valid = !0, a.alignment = o) : (a.is_valid = !1, a.alignment = o);
}
if (t === "right") {
const l = e.right - s.width;
l + s.width <= window.innerWidth && l >= 0 ? (a.is_valid = !0, a.alignment = l) : (a.is_valid = !1, a.alignment = l);
const l = e.right - n.width;
l + n.width <= window.innerWidth && l >= 0 ? (a.is_valid = !0, a.alignment = l) : (a.is_valid = !1, a.alignment = l);
}
return a;
};
class nt {
class st {
constructor({

@@ -853,5 +857,5 @@ ajala: t,

}) {
c(this, "ajala");
c(this, "placement");
c(this, "ui");
p(this, "ajala");
p(this, "placement");
p(this, "ui");
this.ajala = t, this.placement = i, this.ui = e;

@@ -867,14 +871,14 @@ }

}, e = this.ui.getTargetElement(
this.ajala.flatten_steps[t].target
this.ajala.getFlattenSteps()[t].target
);
if (!e) return i;
const s = e.getBoundingClientRect(), { spotlight: a } = this.placement.getMetadata({
const n = e.getBoundingClientRect(), { spotlight: a } = this.placement.getMetadata({
next_index: t
});
return i.x = Math.max(0, s.x - a.padding), i.y = Math.max(0, s.y - a.padding), i.width = Math.min(
return i.x = Math.max(0, n.x - a.padding), i.y = Math.max(0, n.y - a.padding), i.width = Math.min(
window.innerWidth,
s.width + a.padding * 2
n.width + a.padding * 2
), i.height = Math.min(
window.innerWidth,
s.height + a.padding * 2
n.height + a.padding * 2
), i.border_radius = a.border_radius, i;

@@ -885,9 +889,9 @@ }

constructor({ ajala: t, ui: i }) {
c(this, "ajala");
c(this, "arrow");
c(this, "tooltip");
c(this, "overlay_cutout_svg_rect");
c(this, "ui");
c(this, "animations");
this.arrow = new at({ ajala: t, ui: i, placement: this }), this.tooltip = new st({ ajala: t, ui: i, placement: this }), this.overlay_cutout_svg_rect = new nt({
p(this, "ajala");
p(this, "arrow");
p(this, "tooltip");
p(this, "overlay_cutout_svg_rect");
p(this, "ui");
p(this, "animations");
this.arrow = new at({ ajala: t, ui: i, placement: this }), this.tooltip = new nt({ ajala: t, ui: i, placement: this }), this.overlay_cutout_svg_rect = new st({
ajala: t,

@@ -902,6 +906,6 @@ ui: i,

}) {
var o, _;
const e = this.ajala.flatten_steps[t].tooltip_gutter || this.ajala.options.tooltip_gutter || 10, s = i || this.ajala.flatten_steps[t].tooltip_placement || this.ajala.options.tooltip_placement || "auto", a = s.split("_"), l = this.ajala.flatten_steps[t].spotlight_padding || ((o = this.ajala.options.spotlight_options) == null ? void 0 : o.padding) || 0, n = this.ajala.flatten_steps[t].spotlight_border_radius || ((_ = this.ajala.options.spotlight_options) == null ? void 0 : _.border_radius) || 0;
var o, c;
const e = this.ajala.getFlattenSteps()[t].tooltip_gutter || this.ajala.options.tooltip_gutter || 10, n = i || this.ajala.getFlattenSteps()[t].tooltip_placement || this.ajala.options.tooltip_placement || "auto", a = n.split("_"), l = this.ajala.getFlattenSteps()[t].spotlight_padding || ((o = this.ajala.options.spotlight_options) == null ? void 0 : o.padding) || 0, s = this.ajala.getFlattenSteps()[t].spotlight_border_radius || ((c = this.ajala.options.spotlight_options) == null ? void 0 : c.border_radius) || 0;
return {
placement: s,
placement: n,
axis: a[0],

@@ -912,3 +916,3 @@ align: a[1],

padding: l,
border_radius: n
border_radius: s
}

@@ -920,3 +924,3 @@ };

}
var k, B;
var k, q;
class ot {

@@ -928,11 +932,11 @@ constructor({

}) {
C(this, k);
c(this, "ajala");
c(this, "ui");
c(this, "placement");
c(this, "transition_type");
c(this, "is_animating", !1);
c(this, "transition");
var s;
this.ajala = t, this.ui = i, this.placement = e, this.transition_type = ((s = this.ajala.options) == null ? void 0 : s.transition_type) || "traveller", this.transition = {
S(this, k);
p(this, "ajala");
p(this, "ui");
p(this, "placement");
p(this, "transition_type");
p(this, "is_animating", !1);
p(this, "transition");
var n;
this.ajala = t, this.ui = i, this.placement = e, this.transition_type = ((n = this.ajala.options) == null ? void 0 : n.transition_type) || "traveller", this.transition = {
traveller: this.travelTransition.bind(this),

@@ -953,3 +957,3 @@ popout: this.popOutTransition.bind(this)

duration: e = 1e3,
onPlay: s = () => {
onPlay: n = () => {
},

@@ -961,17 +965,17 @@ onUpdate: a = () => {

}) {
const n = performance.now();
let o = !0, _;
const r = {
easeInOut: (u) => u < 0.5 ? 2 * u * u : 1 - Math.pow(-2 * u + 2, 2) / 2
const s = performance.now();
let o = !0, c;
const h = {
easeInOut: (g) => g < 0.5 ? 2 * g * g : 1 - Math.pow(-2 * g + 2, 2) / 2
// Second half: decelerate
}.easeInOut;
s();
const m = (u) => {
n();
const m = (g) => {
if (!o) return;
const g = u - n, x = Math.min(g / e, 1), b = r(x), Q = S(t, i, b);
a(Q), x < 1 ? (_ = requestAnimationFrame(m), this.is_animating = !0) : (l(), this.is_animating = !1);
const f = g - s, j = Math.min(f / e, 1), b = h(j), Z = T(t, i, b);
a(Z), j < 1 ? (c = requestAnimationFrame(m), this.is_animating = !0) : (l(), this.is_animating = !1);
};
return _ = requestAnimationFrame(m), {
return c = requestAnimationFrame(m), {
stop: () => {
o = !1, cancelAnimationFrame(_);
o = !1, cancelAnimationFrame(c);
}

@@ -982,8 +986,8 @@ };

return new Promise((e) => {
var _, d;
const s = t.getBoundingClientRect(), a = window.innerHeight / 2 - s.height / 2;
let l = window.scrollY + s.y - a;
const n = document.documentElement.scrollHeight - window.innerHeight;
l = Math.min(Math.max(0, l), n);
const o = ((_ = this.ajala.flatten_steps[i]) == null ? void 0 : _.scroll_duration) ?? ((d = this.ajala.options) == null ? void 0 : d.scroll_duration) ?? 1e3;
var c, d;
const n = t.getBoundingClientRect(), a = window.innerHeight / 2 - n.height / 2;
let l = window.scrollY + n.y - a;
const s = document.documentElement.scrollHeight - window.innerHeight;
l = Math.min(Math.max(0, l), s);
const o = ((c = this.ajala.getFlattenSteps()[i]) == null ? void 0 : c.scroll_duration) ?? ((d = this.ajala.options) == null ? void 0 : d.scroll_duration) ?? 1e3;
this.animate({

@@ -993,4 +997,4 @@ from: window.scrollY,

duration: o,
onUpdate(r) {
window.scrollTo(0, r);
onUpdate(h) {
window.scrollTo(0, h);
},

@@ -1004,3 +1008,3 @@ onComplete() {

spotlightTarget(t) {
const { x: i, y: e, width: s, height: a, border_radius: l } = this.placement.overlay_cutout_svg_rect.calculatePlacmentDelta({
const { x: i, y: e, width: n, height: a, border_radius: l } = this.placement.overlay_cutout_svg_rect.calculatePlacmentDelta({
active_index: t

@@ -1012,8 +1016,8 @@ });

duration: 500,
onUpdate: (n) => {
onUpdate: (s) => {
this.ui.updateOverlayCutoutPathData({
x: i,
y: e,
width: s * n,
height: a * n,
width: n * s,
height: a * s,
border_radius: l

@@ -1037,3 +1041,3 @@ });

} = {}) {
const s = this.ui.tooltip_container_element;
const n = this.ui.tooltip_container_element;
if (t.is_valid) {

@@ -1043,5 +1047,5 @@ const {

x_offset: l,
y_delta: n,
y_delta: s,
y_offset: o,
tooltip_rect: _,
tooltip_rect: c,
active_index: d

@@ -1052,6 +1056,6 @@ } = t;

to: 1,
duration: v(this, k, B).call(this, d),
onUpdate(r) {
const m = (_ == null ? void 0 : _.x) ?? 0, u = (_ == null ? void 0 : _.y) ?? 0, g = m + (a + l) * r, x = u + (n + o) * r;
s.style.transform = `translate(${g}px, ${x}px)`;
duration: v(this, k, q).call(this, d),
onUpdate(h) {
const m = (c == null ? void 0 : c.x) ?? 0, g = (c == null ? void 0 : c.y) ?? 0, f = m + (a + l) * h, j = g + (s + o) * h;
n.style.transform = `translate(${f}px, ${j}px)`;
},

@@ -1071,11 +1075,11 @@ onComplete: () => {

} = {}) {
const s = this.ui.tooltip_container_element;
const n = this.ui.tooltip_container_element;
if (t.is_valid) {
const { x_delta: a, y_delta: l, active_index: n } = t;
const { x_delta: a, y_delta: l, active_index: s } = t;
this.animate({
from: 0,
to: 1,
duration: v(this, k, B).call(this, n),
duration: v(this, k, q).call(this, s),
onUpdate(o) {
s.style.visibility = "visible", s.style.transform = `translate(${a}px, ${l}px) scale(${o})`;
n.style.visibility = "visible", n.style.transform = `translate(${a}px, ${l}px) scale(${o})`;
},

@@ -1086,3 +1090,3 @@ onComplete: () => {

onPlay: () => {
this.spotlightTarget(n), e && e();
this.spotlightTarget(s), e && e();
}

@@ -1093,36 +1097,36 @@ });

}
k = new WeakSet(), B = function(t) {
k = new WeakSet(), q = function(t) {
var i, e;
return ((i = this.ajala.flatten_steps[t]) == null ? void 0 : i.transition_duration) ?? ((e = this.ajala.options) == null ? void 0 : e.transition_duration) ?? 1e3;
return ((i = this.ajala.getFlattenSteps()[t]) == null ? void 0 : i.transition_duration) ?? ((e = this.ajala.options) == null ? void 0 : e.transition_duration) ?? 1e3;
};
var w, j, f, $, L, I, Y, Z;
var x, y, u, E, O, L, J, Y;
class ht extends it {
constructor(i, { start_immediately: e = !0, ...s } = {
constructor(i, { start_immediately: e = !0, ...n } = {
start_immediately: !0
}) {
super();
C(this, I);
c(this, "options");
c(this, "is_active");
c(this, "initialized");
c(this, "original_steps");
c(this, "flatten_steps");
C(this, w);
c(this, "active_step");
C(this, j);
C(this, f);
C(this, $);
C(this, L);
const a = D(i);
this.options = { start_immediately: e, ...s }, this.is_active = !!this.options.start_immediately, this.original_steps = a, E(this, w, {
S(this, L);
p(this, "options");
p(this, "is_active");
p(this, "initialized");
p(this, "original_steps");
p(this, "flatten_steps");
S(this, x);
p(this, "active_step");
S(this, y);
S(this, u);
S(this, E);
S(this, O);
const a = R(i);
this.options = { start_immediately: e, ...n }, this.is_active = !!this.options.start_immediately, this.original_steps = a, C(this, x, {
instances: [],
queries: {}
}), this.flatten_steps = [], this.initialized = !0, this.active_step = this.flatten_steps[0], E(this, j, new tt(this)), E(this, f, new et({
}), this.flatten_steps = [], this.initialized = !0, this.active_step = this.flatten_steps[0], C(this, y, new tt(this)), C(this, u, new et({
ajala: this,
ui: p(this, j)
})), E(this, $, new lt({ ajala: this, ui: p(this, j) })), E(this, L, new ot({
ui: _(this, y)
})), C(this, E, new lt({ ajala: this, ui: _(this, y) })), C(this, O, new ot({
ajala: this,
ui: p(this, j),
placement: p(this, $)
})), p(this, j).navigation = p(this, f), p(this, j).placement = p(this, $), p(this, f).placement = p(this, $), p(this, f).animations = p(this, L), p(this, $).animations = p(this, L), this.active_step = this.flatten_steps[p(this, f).getValidNavIndex(0, "next")], this.destroy = this.destroy.bind(this);
ui: _(this, y),
placement: _(this, E)
})), _(this, y).navigation = _(this, u), _(this, y).placement = _(this, E), _(this, u).placement = _(this, E), _(this, u).animations = _(this, O), _(this, E).animations = _(this, O), this.active_step = this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")], this.destroy = this.destroy.bind(this);
}

@@ -1134,10 +1138,10 @@ /**

this.initialized = !0;
const e = D(this.original_steps);
this.is_active = !!this.options.start_immediately, this.original_steps = e, E(this, w, {
const e = R(this.original_steps);
this.is_active = !!this.options.start_immediately, this.original_steps = e, C(this, x, {
instances: [],
queries: z(e)
}), this.flatten_steps = N(
queries: N(e)
}), this.flatten_steps = z(
e,
p(this, w).queries
), v(this, I, Z).call(this), this.active_step = this.flatten_steps[p(this, f).getValidNavIndex(0, "next")], this.is_active = !!this.options.start_immediately, p(this, j).init(), p(this, f).init(), (this.options.start_immediately || i) && this.start();
_(this, x).queries
), v(this, L, Y).call(this), this.active_step = this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")], this.is_active = !!this.options.start_immediately, _(this, y).init(), _(this, u).init(), (this.options.start_immediately || i) && this.start();
}

@@ -1147,5 +1151,8 @@ /**

* Flatten steps are the steps after all media queries have been applied based on current screen size.
*
* @param remove_skipped_steps - Whether to remove skipped steps from the flatten steps, defaults to true.
*/
getFlattenSteps() {
return this.flatten_steps;
getFlattenSteps(i = !0) {
let e = this.flatten_steps;
return i && (e = e.filter((n) => !(n != null && n.skip))), e;
}

@@ -1163,6 +1170,6 @@ /**

getActiveStepFlattenIndex() {
const i = this.flatten_steps.findIndex(
const i = this.getFlattenSteps().findIndex(
(e) => {
var s;
return e.id === ((s = this.active_step) == null ? void 0 : s.id);
var n;
return e.id === ((n = this.active_step) == null ? void 0 : n.id);
}

@@ -1179,4 +1186,4 @@ );

(e) => {
var s;
return e.id === ((s = this.active_step) == null ? void 0 : s.id);
var n;
return e.id === ((n = this.active_step) == null ? void 0 : n.id);
}

@@ -1192,10 +1199,10 @@ );

updateSteps(i, e = !0) {
const s = D(i);
this.original_steps = s, E(this, w, {
const n = R(i);
this.original_steps = n, C(this, x, {
instances: [],
queries: z(s)
}), this.flatten_steps = N(
s,
p(this, w).queries
), this.active_step = this.flatten_steps[0], e && this.restart();
queries: N(n)
}), this.flatten_steps = z(
n,
_(this, x).queries
), this.active_step = this.getFlattenSteps()[0], e && this.restart();
}

@@ -1225,3 +1232,3 @@ /**

isLastStep() {
return this.getActiveStepFlattenIndex() === this.flatten_steps.length - 1;
return this.getActiveStepFlattenIndex() === this.getFlattenSteps().length - 1;
}

@@ -1239,3 +1246,3 @@ /**

start() {
this.is_active = !0, this.active_step = this.flatten_steps[p(this, f).getValidNavIndex(0, "next")], p(this, j).start(), p(this, f).start(), this.dispatchEvent({
this.is_active = !0, this.active_step = this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")], _(this, y).start(), _(this, u).start(), this.dispatchEvent({
type: "onStart",

@@ -1256,3 +1263,3 @@ data: this

next() {
this.is_active && p(this, f).next();
this.is_active && _(this, u).next();
}

@@ -1263,3 +1270,3 @@ /**

prev() {
this.is_active && p(this, f).prev();
this.is_active && _(this, u).prev();
}

@@ -1270,3 +1277,3 @@ /**

close() {
p(this, f).close();
_(this, u).close();
}

@@ -1279,4 +1286,4 @@ /**

if (!this.is_active) return;
const e = this.flatten_steps.findIndex((s) => s.id === i);
e > -1 && p(this, f).goTo(e);
const e = this.getFlattenSteps().findIndex((n) => n.id === i);
e > -1 && _(this, u).goTo(e);
}

@@ -1287,3 +1294,3 @@ /**

refresh() {
this.is_active && p(this, j).refresh();
this.is_active && _(this, y).refresh();
}

@@ -1294,31 +1301,31 @@ /**

destroy() {
v(this, I, Y).call(this), p(this, j).destroy(), this.is_active = !1;
v(this, L, J).call(this), _(this, y).destroy(), this.is_active = !1;
}
}
w = new WeakMap(), j = new WeakMap(), f = new WeakMap(), $ = new WeakMap(), L = new WeakMap(), I = new WeakSet(), Y = function() {
p(this, w).instances.forEach((i) => {
x = new WeakMap(), y = new WeakMap(), u = new WeakMap(), E = new WeakMap(), O = new WeakMap(), L = new WeakSet(), J = function() {
_(this, x).instances.forEach((i) => {
i.onchange = null;
}), p(this, j).cleanUp(), p(this, f).cleanUp();
}, Z = function() {
}), _(this, y).cleanUp(), _(this, u).cleanUp();
}, Y = function() {
for (const [i, e] of Object.entries(
p(this, w).queries
_(this, x).queries
)) {
const s = window.matchMedia(i);
s.matches && (this.flatten_steps = M(
const n = window.matchMedia(i);
n.matches && (this.flatten_steps = I(
this.flatten_steps,
e,
"value"
)), s.onchange = (a) => {
const l = p(this, w).queries[a.media];
a.matches && l ? this.flatten_steps = M(
)), n.onchange = (a) => {
const l = _(this, x).queries[a.media];
a.matches && l ? this.flatten_steps = I(
this.flatten_steps,
l,
"value"
) : (l && (this.flatten_steps = M(
) : (l && (this.flatten_steps = I(
this.flatten_steps,
l,
"default"
)), p(this, w).instances.forEach((n) => {
const o = p(this, w).queries[n.media];
n.matches && o && (this.flatten_steps = M(
)), _(this, x).instances.forEach((s) => {
const o = _(this, x).queries[s.media];
s.matches && o && (this.flatten_steps = I(
this.flatten_steps,

@@ -1328,4 +1335,6 @@ o,

));
})), this.goToStep(this.flatten_steps[0].id);
}, p(this, w).instances.push(s);
})), _(this, y).update(), this.goToStep(
this.getFlattenSteps()[_(this, u).getValidNavIndex(0, "next")].id
);
}, _(this, x).instances.push(n);
}

@@ -1332,0 +1341,0 @@ };

4

dist/index.d.ts

@@ -17,4 +17,6 @@ export declare class AjalaJourney extends EventEmitter<TAjalaEventTypes> {

* Flatten steps are the steps after all media queries have been applied based on current screen size.
*
* @param remove_skipped_steps - Whether to remove skipped steps from the flatten steps, defaults to true.
*/
getFlattenSteps(): TSteps[];
getFlattenSteps(remove_skipped_steps?: boolean): TSteps[];
/**

@@ -21,0 +23,0 @@ * @desc Get original steps provided to ajala.

2

package.json
{
"name": "ajala.js",
"private": false,
"version": "0.3.10",
"version": "0.3.11",
"type": "module",

@@ -6,0 +6,0 @@ "main": "./dist/ajala.cjs",

dist/ajala.cjs

Sorry, the diff of this file is not supported yet