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

react-ajala

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-ajala - npm Package Compare versions

Comparing version

0.1.0
to
0.2.0

23

dist/index.d.ts

@@ -5,8 +5,19 @@ import { AjalaJourney } from 'ajala.js';

import { ReactNode } from 'react';
import { TAjalaEventTypes } from 'ajala.js';
import { TAjalaOptions } from 'ajala.js';
import { TAjalaSteps } from 'ajala.js';
import { TSteps } from 'ajala.js';
import { TTooltipPlacement } from 'ajala.js';
import { TTransitionType } from 'ajala.js';
export declare function AjalaJourneyProvider({ children, getInstance, steps, CustomTooltip, CustomArrow, options, }: TReactAjalaProviderProps): JSX_2.Element;
export declare function AjalaJourneyProvider({ children, getInstance, steps, CustomTooltip, CustomArrow, options, ...callbackFuncs }: TReactAjalaProviderProps): JSX_2.Element;
declare type EventType = Extract<TAjalaEventTypes, "onFinish" | "onNext" | "onPrev" | "onClose" | "onTransitionComplete" | "onStart">;
export { TAjalaEventTypes }
export { TAjalaOptions }
export { TAjalaSteps }
export declare interface TReactAjalaCustomTooltipProps {

@@ -17,3 +28,5 @@ active_step: TSteps | undefined | null;

export declare interface TReactAjalaProviderProps {
declare type TReactAjalaEventTypes = Partial<Record<EventType, (value: any) => void>>;
export declare interface TReactAjalaProviderProps extends TReactAjalaEventTypes {
steps: TAjalaSteps[];

@@ -27,4 +40,10 @@ options: Omit<TAjalaOptions, "custom_tooltip" | "custom_arrow">;

export { TSteps }
export { TTooltipPlacement }
export { TTransitionType }
export declare function useAjalaJourneyContext(): AjalaJourney;
export { }

922

dist/react-ajala.js

@@ -1,34 +0,34 @@

import { jsxs as rt, jsx as G } from "react/jsx-runtime";
import { createContext as ht, useState as H, useEffect as ct, useContext as dt } from "react";
import { createPortal as K } from "react-dom";
var pt = Object.defineProperty, X = (o) => {
throw TypeError(o);
}, _t = (o, t, e) => t in o ? pt(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, d = (o, t, e) => _t(o, typeof t != "symbol" ? t + "" : t, e), F = (o, t, e) => t.has(o) || X("Cannot " + e), _ = (o, t, e) => (F(o, t, "read from private field"), e ? e.call(o) : t.get(o)), E = (o, t, e) => t.has(o) ? X("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), S = (o, t, e, i) => (F(o, t, "write to private field"), t.set(o, e), e), f = (o, t, e) => (F(o, t, "access private method"), e);
function tt(o) {
import { jsxs as _t, jsx as F } from "react/jsx-runtime";
import { createContext as mt, useState as q, useEffect as z, useContext as ct } from "react";
import { createPortal as tt } from "react-dom";
var vt = Object.defineProperty, at = (l) => {
throw TypeError(l);
}, ut = (l, t, e) => t in l ? vt(l, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[t] = e, p = (l, t, e) => ut(l, typeof t != "symbol" ? t + "" : t, e), G = (l, t, e) => t.has(l) || at("Cannot " + e), m = (l, t, e) => (G(l, t, "read from private field"), e ? e.call(l) : t.get(l)), S = (l, t, e) => t.has(l) ? at("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(l) : t.set(l, e), L = (l, t, e, i) => (G(l, t, "write to private field"), t.set(l, e), e), g = (l, t, e) => (G(l, t, "access private method"), e);
function nt(l) {
const t = /* @__PURE__ */ new Map(), e = [], i = [];
for (const s of o)
(s == null ? void 0 : s.order) === void 0 ? e.push(s) : (s == null ? void 0 : s.order) > o.length || (s == null ? void 0 : s.order) < 0 ? i.push(s) : t.set(s.order, s);
const a = new Array(o.length);
let n = 0, l = 0;
for (let s = 0; s < o.length; s++)
t.has(s) ? a[s] = t.get(s) : n < e.length ? a[s] = e[n++] : a[s] = i[l++];
return a.length === o.length ? a : a.slice(0, o.length);
for (const o of l)
(o == null ? void 0 : o.order) === void 0 ? e.push(o) : (o == null ? void 0 : o.order) > l.length || (o == null ? void 0 : o.order) < 0 ? i.push(o) : t.set(o.order, o);
const a = new Array(l.length);
let s = 0, n = 0;
for (let o = 0; o < l.length; o++)
t.has(o) ? a[o] = t.get(o) : s < e.length ? a[o] = e[s++] : a[o] = i[n++];
return a.length === l.length ? a : a.slice(0, l.length);
}
function Q(o) {
function et(l) {
const t = {}, e = ["id", "data"];
for (let i = 0; i < o.length; i++) {
const a = o[i];
Object.keys(a).forEach((n) => {
if (!e.includes(n)) {
const l = a[n];
l && typeof l == "object" && Object.keys(l).forEach((s) => {
if (s === "default") return;
const c = {
for (let i = 0; i < l.length; i++) {
const a = l[i];
Object.keys(a).forEach((s) => {
if (!e.includes(s)) {
const n = a[s];
n && typeof n == "object" && Object.keys(n).forEach((o) => {
if (o === "default") return;
const h = {
id: a.id,
key: n,
value: l[s],
media_query: s,
default: l.default
key: s,
value: n[o],
media_query: o,
default: n.default
};
t[s] ? t[s].push(c) : t[s] = [c];
t[o] ? t[o].push(h) : t[o] = [h];
});

@@ -40,17 +40,17 @@ }

}
function k(o, t, e) {
const i = JSON.parse(JSON.stringify(o));
function M(l, t, e) {
const i = JSON.parse(JSON.stringify(l));
return t.forEach((a) => {
const n = i.findIndex(
(l) => (l == null ? void 0 : l.id) === a.id
const s = i.findIndex(
(n) => (n == null ? void 0 : n.id) === a.id
);
n > -1 && (i[n][a.key] = a[e]);
}), tt(i);
s > -1 && (i[s][a.key] = a[e]);
}), nt(i);
}
function V(o, t) {
function it(l, t) {
let e = JSON.parse(
JSON.stringify(o)
JSON.stringify(l)
);
return Object.values(t).forEach((i) => {
i && (e = k(
i && (e = M(
e,

@@ -60,20 +60,20 @@ i,

));
}), tt(e);
}), nt(e);
}
const $ = (o, t, e) => (e = Math.max(0, Math.min(1, e)), o + (t - o) * e);
function ut(o, t) {
const T = (l, t, e) => (e = Math.max(0, Math.min(1, e)), l + (t - l) * e);
function gt(l, t) {
let e = null;
return function(...i) {
e && clearTimeout(e), e = setTimeout(() => {
o(...i), clearTimeout(e), e = null;
l(...i), clearTimeout(e), e = null;
}, t);
};
}
function I(o) {
function N(l) {
const t = /* @__PURE__ */ new Set(), e = [];
for (let i = 0; i < o.length; i++) {
const a = o[i], n = `step-${i + Math.random()}`;
for (let i = 0; i < l.length; i++) {
const a = l[i], s = `step-${i + Math.random()}`;
a.id ? t.has(a.id) ? (console.warn(
`Duplicate ajala step id found: ${a.id}. Please make sure all step ids are unique.`
), a.id = n) : t.add(a.id) : (a.id = n, console.warn(
), a.id = s) : t.add(a.id) : (a.id = s, console.warn(
`ajala step ${i} is missing an id. Please make sure all steps have unique ids.`

@@ -84,6 +84,6 @@ )), e.push(a);

}
var M, et, it, at;
class mt {
var P, st, ot, lt;
class ft {
constructor(t) {
E(this, M), d(this, "ajala"), d(this, "tooltip_element"), d(this, "wrapper_element"), d(this, "tooltip_container_element"), d(this, "arrow_element"), d(this, "overlay_element"), d(this, "overlay_path"), d(this, "next_btn"), d(this, "prev_btn"), d(this, "close_btn"), d(this, "is_default_tooltip_element"), d(this, "navigation"), d(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(
S(this, P), 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(
"http://www.w3.org/2000/svg",

@@ -94,6 +94,6 @@ "svg"

"path"
), this.arrow_element = document.createElement("div"), this.next_btn = null, this.prev_btn = null, this.close_btn = null, this.closeOnOverlayClickHandler = this.closeOnOverlayClickHandler.bind(this), this.refresh = ut(this.refresh.bind(this), 200);
), this.arrow_element = document.createElement("div"), this.next_btn = null, this.prev_btn = null, this.close_btn = null, this.closeOnOverlayClickHandler = this.closeOnOverlayClickHandler.bind(this), this.refresh = gt(this.refresh.bind(this), 200);
}
init() {
var t, e, i, a, n, l, s, c, h, p;
var t, e, i, a, s, n, o, h, d, _;
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(

@@ -105,7 +105,7 @@ "click",

this.closeOnOverlayClickHandler
), this.ajala.options.custom_tooltip || f(this, M, et).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : f(this, M, it).call(this);
), this.ajala.options.custom_tooltip || g(this, P, st).call(this), this.ajala.options.custom_arrow ? this.arrow_element.appendChild(this.ajala.options.custom_arrow) : g(this, P, ot).call(this);
const r = (t = this.ajala.options.default_arrow_options) != null && t.size ? `${(e = this.ajala.options.default_arrow_options) == null ? void 0 : e.size}px` : "48px";
this.arrow_element.style.position = "absolute", this.arrow_element.style.width = r, this.arrow_element.style.height = r, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((i = this.ajala.options.default_arrow_options) == null ? void 0 : i.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (a = this.ajala.options.default_arrow_options) != null && a.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 ? `${(l = this.ajala.options) == null ? void 0 : l.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (s = this.ajala.options) != null && s.tooltip_height ? `${(c = this.ajala.options) == null ? void 0 : c.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 u = document.createElement("style");
u.innerHTML = `
this.arrow_element.style.position = "absolute", this.arrow_element.style.width = r, this.arrow_element.style.height = r, this.arrow_element.style.top = "0px", this.arrow_element.style.left = "0px", this.arrow_element.style.fill = ((i = this.ajala.options.default_arrow_options) == null ? void 0 : i.color) || "#000000", this.arrow_element.style.zIndex = "2", this.arrow_element.style.pointerEvents = "none", this.arrow_element.classList.add("ajala_tooltip_arrow"), (a = this.ajala.options.default_arrow_options) != null && a.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 ? `${(n = this.ajala.options) == null ? void 0 : n.tooltip_width}px` : "250px", this.tooltip_container_element.style.height = (o = this.ajala.options) != null && o.tooltip_height ? `${(h = this.ajala.options) == null ? void 0 : h.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 c = document.createElement("style");
c.innerHTML = `
.ajala_isOverlay.ajala_active * {

@@ -126,31 +126,31 @@ pointer-events: none;

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

@@ -164,20 +164,20 @@ this.arrow_element.style.visibility = "hidden";

width: a,
border_radius: n
border_radius: s
}) {
const l = `
M${t + n},${e}
h${Math.max(a - 2 * n, 0)}
a${n},${n} 0 0 1 ${n},${n}
v${Math.max(i - 2 * n, 0)}
a${n},${n} 0 0 1 -${n},${n}
h-${Math.max(a - 2 * n, 0)}
a${n},${n} 0 0 1 -${n},-${n}
v-${Math.max(i - 2 * n, 0)}
a${n},${n} 0 0 1 ${n},-${n}
const n = `
M${t + s},${e}
h${Math.max(a - 2 * s, 0)}
a${s},${s} 0 0 1 ${s},${s}
v${Math.max(i - 2 * s, 0)}
a${s},${s} 0 0 1 -${s},${s}
h-${Math.max(a - 2 * s, 0)}
a${s},${s} 0 0 1 -${s},-${s}
v-${Math.max(i - 2 * s, 0)}
a${s},${s} 0 0 1 ${s},-${s}
z
`, s = `
`, o = `
M${window.innerWidth},0 L0,0 L0,${window.innerHeight} L${window.innerWidth},${window.innerHeight} L${window.innerWidth},0 Z
${l}
${n}
`;
this.overlay_path.setAttribute("d", s);
this.overlay_path.setAttribute("d", o);
}

@@ -267,10 +267,10 @@ resetOverlayCutoutSvgRect() {

}
M = /* @__PURE__ */ new WeakSet(), et = function() {
var o, t, e, i, a, n;
P = /* @__PURE__ */ new WeakSet(), st = function() {
var l, t, e, i, a, s;
this.is_default_tooltip_element = !0;
const l = this.ajala.options.default_tooltip_options;
const n = this.ajala.options.default_tooltip_options;
this.tooltip_element.classList.add("ajala_tooltip");
let s = "";
for (let c = 0; c < this.ajala.original_steps.length; c++)
s = `${s} <div class="ajala_dot_nav"></div>
let o = "";
for (let h = 0; h < this.ajala.original_steps.length; h++)
o = `${o} <div class="ajala_dot_nav"></div>
`;

@@ -280,3 +280,3 @@ this.tooltip_element.innerHTML = `

<div class="ajala_dot_navs">
${s}
${o}
</div>

@@ -299,3 +299,3 @@ <button class="ajala_close_btn">

</div>
<h3 class="ajala_title">${(o = this.ajala.active_step) == null ? void 0 : o.title}</h3>
<h3 class="ajala_title">${(l = this.ajala.active_step) == null ? void 0 : l.title}</h3>
<p class="ajala_content">

@@ -307,12 +307,12 @@ ${(t = this.ajala.active_step) == null ? void 0 : t.content}

<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"), l != null && l.class_name && this.tooltip_element.classList.add(l.class_name), l != null && l.hide_dot_nav && ((e = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || e.remove()), l != null && l.hide_title && ((i = this.tooltip_element.querySelector(".ajala_title")) == null || i.remove()), l != null && l.hide_content && ((a = this.tooltip_element.querySelector(".ajala_content")) == null || a.remove()), l != null && l.hide_close_btn && ((n = this.close_btn) == null || n.remove());
}, it = function() {
var o, t;
const e = (o = this.ajala.options.default_arrow_options) != null && o.size ? `${(t = this.ajala.options.default_arrow_options) == null ? void 0 : t.size}px` : "48px";
</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"), n != null && n.class_name && this.tooltip_element.classList.add(n.class_name), n != null && n.hide_dot_nav && ((e = this.tooltip_element.querySelector(".ajala_dot_navs")) == null || e.remove()), n != null && n.hide_title && ((i = this.tooltip_element.querySelector(".ajala_title")) == null || i.remove()), n != null && n.hide_content && ((a = this.tooltip_element.querySelector(".ajala_content")) == null || a.remove()), n != null && n.hide_close_btn && ((s = this.close_btn) == null || s.remove());
}, ot = function() {
var l, t;
const e = (l = this.ajala.options.default_arrow_options) != null && l.size ? `${(t = this.ajala.options.default_arrow_options) == null ? void 0 : t.size}px` : "48px";
this.arrow_element.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" height="${e}" viewBox="0 -960 960 960" width="${e}" fill="inherit"><path d="M321.54-394.5q-10.19 0-16.53-6.96-6.34-6.95-6.34-15.91 0-2.48 6.96-15.91l150.5-150.5q5.48-5.48 11.32-7.72 5.83-2.24 12.55-2.24 6.72 0 12.55 2.24 5.84 2.24 11.32 7.72l150.5 150.5q3.48 3.48 5.22 7.45 1.74 3.98 1.74 8.46 0 8.96-6.34 15.91-6.34 6.96-16.53 6.96H321.54Z"/></svg>
`;
}, at = function() {
var o, t, e;
const i = ((t = (o = this.ajala.options.overlay_options) == null ? void 0 : o.opacity) == null ? void 0 : t.toString()) || " 0.7", a = ((e = this.ajala.options.overlay_options) == null ? void 0 : e.color) || " black";
}, lt = function() {
var l, t, e;
const i = ((t = (l = this.ajala.options.overlay_options) == null ? void 0 : l.opacity) == null ? void 0 : t.toString()) || " 0.7", a = ((e = this.ajala.options.overlay_options) == null ? void 0 : e.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({

@@ -326,5 +326,6 @@ x: 0,

};
class vt {
var A, D;
class yt {
constructor({ ajala: t, ui: e }) {
d(this, "ajala"), d(this, "ui"), d(this, "placement"), d(this, "animations"), this.ajala = t, this.ui = e, this.next = this.next.bind(this), this.prev = this.prev.bind(this), this.close = this.close.bind(this);
S(this, A), p(this, "ajala"), p(this, "ui"), p(this, "placement"), p(this, "animations"), this.ajala = t, this.ui = e, this.next = this.next.bind(this), this.prev = this.prev.bind(this), this.close = this.close.bind(this);
}

@@ -335,20 +336,26 @@ init() {

async goTo(t) {
var e;
if (!((e = this.animations) != null && e.is_animating) && t >= 0 && t <= this.ajala.flatten_steps.length) {
this.animations.is_animating = !0, this.ui.resetOverlayCutoutSvgRect();
const i = await this.placement.tooltip.calculateTravelDistance(t), a = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.flatten_steps[i.active_index], this.ui.update(i), this.ajala.dispatchEvent({
type: "onTransitionComplete",
data: {
transitionType: "goTo",
self: this.ajala
var e, i;
if (!((e = this.animations) != null && e.is_animating)) {
if ((i = this.ajala.flatten_steps[t]) != null && i.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) {
this.animations.is_animating = !0, this.ui.resetOverlayCutoutSvgRect();
const a = await this.placement.tooltip.calculateTravelDistance(t), s = () => {
this.animations.is_animating = !1, this.ajala.active_step = this.ajala.flatten_steps[a.active_index], this.ui.update(a), this.ajala.dispatchEvent({
type: "onTransitionComplete",
data: {
transitionType: "goTo",
self: this.ajala
}
});
};
this.animations.transition[this.animations.transition_type](
a,
{
onComplete: s
}
});
};
this.animations.transition[this.animations.transition_type](
i,
{
onComplete: a
}
);
);
}
}

@@ -358,4 +365,4 @@ }

if (this.animations.is_animating) return;
const t = this.ajala.getActiveStepFlattenIndex() + 1;
if (this.ajala.flatten_steps.length > t) {
let t = this.ajala.getActiveStepFlattenIndex() + 1;
if (t = g(this, A, D).call(this, t, "next"), this.ajala.flatten_steps.length > t) {
this.animations.is_animating = !0, this.ajala.dispatchEvent({

@@ -388,4 +395,4 @@ type: "onNext",

if (this.animations.is_animating) return;
const t = this.ajala.getActiveStepFlattenIndex() - 1;
if (t > -1) {
let t = this.ajala.getActiveStepFlattenIndex() - 1;
if (t = g(this, A, D).call(this, t, "prev"), t > -1) {
this.animations.is_animating = !0, this.ajala.dispatchEvent({

@@ -420,6 +427,13 @@ type: "onPrev",

this.animations.is_animating = !1;
const t = await this.placement.tooltip.calculateTravelDistance(0);
this.animations.transition[this.animations.transition_type](
t
), this.ui.update(t);
const t = g(this, A, D).call(this, 0, "next");
if (this.ajala.flatten_steps.length > t) {
const e = await this.placement.tooltip.calculateTravelDistance(t);
this.animations.transition[this.animations.transition_type](
e
), this.ui.update(e);
} else
this.ajala.dispatchEvent({
type: "onFinish",
data: this.ajala
}), this.ajala.destroy();
}

@@ -430,5 +444,29 @@ cleanUp() {

}
class gt {
A = /* @__PURE__ */ new WeakSet(), D = function(l, t) {
const e = this.ajala.flatten_steps[l];
let i = l;
if (t === "next" && e != null && e.skip) {
i = this.ajala.flatten_steps.length;
for (let a = l; a < this.ajala.flatten_steps.length; a++) {
const s = this.ajala.flatten_steps[a];
if (!(s != null && s.skip)) {
i = a;
break;
}
}
} else if (t === "prev" && e != null && e.skip) {
i = -1;
for (let a = l; a > 0; a--) {
const s = this.ajala.flatten_steps[a];
if (!(s != null && s.skip)) {
i = a;
break;
}
}
}
return i;
};
class wt {
constructor() {
d(this, "_listeners");
p(this, "_listeners");
}

@@ -457,4 +495,4 @@ /**

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

@@ -473,4 +511,4 @@ }

const a = i.slice(0);
for (let n = 0, l = a.length; n < l; n++)
a[n].call(this, t);
for (let s = 0, n = a.length; s < n; s++)
a[s].call(this, t);
}

@@ -480,3 +518,3 @@ }

var O;
class ft {
class xt {
constructor({

@@ -487,3 +525,3 @@ ajala: t,

}) {
d(this, "ajala"), d(this, "placement"), E(this, O), this.ajala = t, S(this, O, e), this.placement = i;
p(this, "ajala"), p(this, "placement"), S(this, O), this.ajala = t, L(this, O, e), this.placement = i;
}

@@ -498,35 +536,35 @@ calculatePlacmentDelta({

rotate: 0
}, a = _(this, O).getTargetElement(
}, a = m(this, O).getTargetElement(
this.ajala.flatten_steps[t].target
);
if (!a) return i;
const n = a.getBoundingClientRect(), l = _(this, O).arrow_element.getBoundingClientRect(), s = _(this, O).tooltip_container_element.getBoundingClientRect(), { axis: c, align: h } = this.placement.getMetadata({
const s = a.getBoundingClientRect(), n = m(this, O).arrow_element.getBoundingClientRect(), o = m(this, O).tooltip_container_element.getBoundingClientRect(), { axis: h, align: d } = this.placement.getMetadata({
next_index: t,
placement: e
}), p = 2;
if (c === "top" || c === "bottom") {
if (h === "left") {
let r = $(0, s.width, 0.05);
n.width < s.width / 2 && (r = -l.width / 2 + n.width / 2), i.x = r;
} else if (h === "center") {
let r = $(0, s.width, 0.5);
r = r - l.width / 2, i.x = r;
} else if (h === "right") {
let r = $(0, s.width, 0.95);
r = r - l.width, n.width < s.width / 2 && (r = s.width - l.width / 2 - n.width / 2), i.x = r;
}), _ = 2;
if (h === "top" || h === "bottom") {
if (d === "left") {
let r = T(0, o.width, 0.05);
s.width < o.width / 2 && (r = -n.width / 2 + s.width / 2), i.x = r;
} else if (d === "center") {
let r = T(0, o.width, 0.5);
r = r - n.width / 2, i.x = r;
} else if (d === "right") {
let r = T(0, o.width, 0.95);
r = r - n.width, s.width < o.width / 2 && (r = o.width - n.width / 2 - s.width / 2), i.x = r;
}
c === "top" ? (i.rotate = 180, i.y = s.height - l.height / 2 + p) : c === "bottom" && (i.rotate = 0, i.y = -(l.height / 2) - p);
h === "top" ? (i.rotate = 180, i.y = o.height - n.height / 2 + _) : h === "bottom" && (i.rotate = 0, i.y = -(n.height / 2) - _);
}
if (c === "left" || c === "right") {
if (h === "top") {
let r = $(0, s.height, 0.1);
n.height < s.height / 2 && (r = -l.height / 2 + n.height / 2), i.y = r;
} else if (h === "center") {
let r = $(0, s.height, 0.5);
r = r - l.height / 2, i.y = r;
} else if (h === "bottom") {
let r = $(0, s.height, 0.9);
r = r - l.height, n.height < s.height / 2 && (r = s.height - l.height / 2 - n.height / 2), i.y = r;
if (h === "left" || h === "right") {
if (d === "top") {
let r = T(0, o.height, 0.1);
s.height < o.height / 2 && (r = -n.height / 2 + s.height / 2), i.y = r;
} else if (d === "center") {
let r = T(0, o.height, 0.5);
r = r - n.height / 2, i.y = r;
} else if (d === "bottom") {
let r = T(0, o.height, 0.9);
r = r - n.height, s.height < o.height / 2 && (r = o.height - n.height / 2 - s.height / 2), i.y = r;
}
c === "left" ? (i.rotate = 90, i.x = s.width - l.width / 2 + p) : c === "right" && (i.rotate = -90, i.x = -(l.width / 2) - p);
h === "left" ? (i.rotate = 90, i.x = o.width - n.width / 2 + _) : h === "right" && (i.rotate = -90, i.x = -(n.width / 2) - _);
}

@@ -539,4 +577,4 @@ return i;

O = /* @__PURE__ */ new WeakMap();
var C, P, R, W, B;
class yt {
var E, R, U, J, Y;
class jt {
constructor({

@@ -547,3 +585,3 @@ ajala: t,

}) {
E(this, C), d(this, "ajala"), d(this, "placement"), d(this, "ui"), this.ajala = t, this.ui = e, this.placement = i;
S(this, E), p(this, "ajala"), p(this, "placement"), p(this, "ui"), this.ajala = t, this.ui = e, this.placement = i;
}

@@ -554,44 +592,44 @@ async calculateTravelDistance(t) {

this.ui.arrow_element.style.visibility = "hidden";
const n = this.ui.getTargetElement(
const s = this.ui.getTargetElement(
this.ajala.flatten_steps[t].target
), l = this.ui.tooltip_container_element;
let s = l.getBoundingClientRect();
const c = (y) => y > 0 ? -y : Math.abs(y);
if (!n)
), n = this.ui.tooltip_container_element;
let o = n.getBoundingClientRect();
const h = (w) => w > 0 ? -w : Math.abs(w);
if (!s)
return {
is_valid: !0,
scrolled: a,
y_delta: window.innerHeight / 2 - s.height / 2,
x_delta: window.innerWidth / 2 - s.width / 2,
y_offset: c(s.y),
x_offset: c(s.x),
y_delta: window.innerHeight / 2 - o.height / 2,
x_delta: window.innerWidth / 2 - o.width / 2,
y_offset: h(o.y),
x_offset: h(o.x),
active_index: t,
tooltip_rect: s,
tooltip_rect: o,
target_rect: null,
taregt_el: n,
taregt_el: s,
placement: "auto"
};
let h = n.getBoundingClientRect();
const p = this.ajala.flatten_steps[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0;
let r = c(s.y), u = c(s.x), m = h.y + p, v = h.x + p;
(h.y < 0 || h.y > window.innerHeight || h.y + h.height > window.innerHeight || m < 0 || m > window.innerHeight || m + s.height > window.innerHeight || m + s.height < 0) && (((e = this.placement.animations) == null ? void 0 : e.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((i = this.placement.animations) == null ? void 0 : i.scrollToLocation(
n,
let d = s.getBoundingClientRect();
const _ = this.ajala.flatten_steps[t].tooltip_gutter ?? this.ajala.options.tooltip_gutter ?? 0;
let r = h(o.y), c = h(o.x), u = d.y + _, y = d.x + _;
(d.y < 0 || d.y > window.innerHeight || d.y + d.height > window.innerHeight || u < 0 || u > window.innerHeight || u + o.height > window.innerHeight || u + o.height < 0) && (((e = this.placement.animations) == null ? void 0 : e.transition_type) === "popout" && (this.ui.tooltip_container_element.style.visibility = "hidden"), await ((i = this.placement.animations) == null ? void 0 : i.scrollToLocation(
s,
t
)), a = !0, h = n.getBoundingClientRect(), s = l.getBoundingClientRect(), r = c(s.y), u = c(s.x));
const g = this.calculatePlacementDelta({
target: n,
)), a = !0, d = s.getBoundingClientRect(), o = n.getBoundingClientRect(), r = h(o.y), c = h(o.x));
const f = this.calculatePlacementDelta({
target: s,
next_index: t
});
return v = g.x_delta, m = g.y_delta, {
y_delta: m,
x_delta: v,
return y = f.x_delta, u = f.y_delta, {
y_delta: u,
x_delta: y,
y_offset: r,
x_offset: u,
tooltip_rect: s,
target_rect: h,
taregt_el: n,
x_offset: c,
tooltip_rect: o,
target_rect: d,
taregt_el: s,
active_index: t,
is_valid: !0,
scrolled: a,
placement: g.placement
placement: f.placement
};

@@ -603,50 +641,50 @@ }

}) {
let i = 0, a = 0, n = "auto";
let i = 0, a = 0, s = "auto";
const {
axis: l,
align: s,
axis_gutter: c,
spotlight: h,
placement: p
} = this.placement.getMetadata({ next_index: e }), r = f(this, C, R).call(this, {
axis: l,
axis: n,
align: o,
axis_gutter: h,
spotlight: d,
placement: _
} = this.placement.getMetadata({ next_index: e }), r = g(this, E, U).call(this, {
axis: n,
target: t,
axis_gutter: c,
spotlight_padding: h.padding
}), u = f(this, C, W).call(this, {
align: s,
axis_gutter: h,
spotlight_padding: d.padding
}), c = g(this, E, J).call(this, {
align: o,
target: t
}), m = f(this, C, B).call(this, {
align: s,
}), u = g(this, E, Y).call(this, {
align: o,
target: t
});
if (l === "top" || l === "bottom")
if (m.is_valid && r.is_valid)
i = m.alignment, a = r.axis, n = p;
if (n === "top" || n === "bottom")
if (u.is_valid && r.is_valid)
i = u.alignment, a = r.axis, s = _;
else {
const { auto_x_delta: v, auto_y_delta: g, auto_placement: y } = f(this, C, P).call(this, {
const { auto_x_delta: y, auto_y_delta: f, auto_placement: w } = g(this, E, R).call(this, {
target: t,
axis_gutter: c,
spotlight_padding: h.padding
axis_gutter: h,
spotlight_padding: d.padding
});
i = v, a = g, n = y;
i = y, a = f, s = w;
}
else if (l === "left" || l === "right")
if (u.is_valid && r.is_valid)
i = r.axis, a = u.alignment, n = p;
else if (n === "left" || n === "right")
if (c.is_valid && r.is_valid)
i = r.axis, a = c.alignment, s = _;
else {
const { auto_x_delta: v, auto_y_delta: g, auto_placement: y } = f(this, C, P).call(this, {
const { auto_x_delta: y, auto_y_delta: f, auto_placement: w } = g(this, E, R).call(this, {
target: t,
axis_gutter: c,
spotlight_padding: h.padding
axis_gutter: h,
spotlight_padding: d.padding
});
i = v, a = g, n = y;
i = y, a = f, s = w;
}
else {
const { auto_x_delta: v, auto_y_delta: g, auto_placement: y } = f(this, C, P).call(this, {
const { auto_x_delta: y, auto_y_delta: f, auto_placement: w } = g(this, E, R).call(this, {
target: t,
axis_gutter: c,
spotlight_padding: h.padding
axis_gutter: h,
spotlight_padding: d.padding
});
i = v, a = g, n = y;
i = y, a = f, s = w;
}

@@ -656,3 +694,3 @@ return {

y_delta: a,
placement: n
placement: s
};

@@ -663,4 +701,4 @@ }

}
C = /* @__PURE__ */ new WeakSet(), P = function({
target: o,
E = /* @__PURE__ */ new WeakSet(), R = function({
target: l,
axis_gutter: t,

@@ -683,34 +721,34 @@ spotlight_padding: e

];
let a = 0, n = 0, l = "bottom_center";
for (let s = 0; s < i.length; s++) {
l = i[s];
const c = l.split("_"), h = c[0], p = c[1], r = f(this, C, R).call(this, {
axis: h,
target: o,
let a = 0, s = 0, n = "bottom_center";
for (let o = 0; o < i.length; o++) {
n = i[o];
const h = n.split("_"), d = h[0], _ = h[1], r = g(this, E, U).call(this, {
axis: d,
target: l,
axis_gutter: t,
spotlight_padding: e
}), u = f(this, C, W).call(this, {
align: p,
target: o
}), m = f(this, C, B).call(this, {
align: p,
target: o
}), c = g(this, E, J).call(this, {
align: _,
target: l
}), u = g(this, E, Y).call(this, {
align: _,
target: l
});
if ((h === "bottom" || h === "top") && r.is_valid && m.is_valid) {
a = m.alignment, n = r.axis;
if ((d === "bottom" || d === "top") && r.is_valid && u.is_valid) {
a = u.alignment, s = r.axis;
break;
}
if ((h === "right" || h === "left") && r.is_valid && u.is_valid) {
a = r.axis, n = u.alignment;
if ((d === "right" || d === "left") && r.is_valid && c.is_valid) {
a = r.axis, s = c.alignment;
break;
}
s === i.length - 1 && (n = r.axis, a = m.alignment);
o === i.length - 1 && (s = r.axis, a = u.alignment);
}
return {
auto_x_delta: a,
auto_y_delta: n,
auto_placement: l
auto_y_delta: s,
auto_placement: n
};
}, R = function({
axis: o,
}, U = function({
axis: l,
target: t,

@@ -720,25 +758,25 @@ axis_gutter: e,

}) {
const a = t.getBoundingClientRect(), n = this.ui.tooltip_container_element.getBoundingClientRect(), l = {
const a = t.getBoundingClientRect(), s = this.ui.tooltip_container_element.getBoundingClientRect(), n = {
is_valid: !1,
axis: 0
};
if (o === "top") {
const s = a.y - n.height - e - i;
s >= 0 && a.y <= window.innerHeight ? (l.is_valid = !0, l.axis = s) : (l.is_valid = !1, l.axis = s);
if (l === "top") {
const o = a.y - s.height - e - i;
o >= 0 && a.y <= window.innerHeight ? (n.is_valid = !0, n.axis = o) : (n.is_valid = !1, n.axis = o);
}
if (o === "bottom") {
const s = a.bottom + e + i;
s + n.height >= 0 && s + n.height <= window.innerHeight ? (l.is_valid = !0, l.axis = s) : (l.is_valid = !1, l.axis = s);
if (l === "bottom") {
const o = a.bottom + e + i;
o + s.height >= 0 && o + s.height <= window.innerHeight ? (n.is_valid = !0, n.axis = o) : (n.is_valid = !1, n.axis = o);
}
if (o === "left") {
const s = a.x - n.width - e - i;
s >= 0 && a.x <= window.innerWidth ? (l.is_valid = !0, l.axis = s) : (l.is_valid = !1, l.axis = s);
if (l === "left") {
const o = a.x - s.width - e - i;
o >= 0 && a.x <= window.innerWidth ? (n.is_valid = !0, n.axis = o) : (n.is_valid = !1, n.axis = o);
}
if (o === "right") {
const s = a.right + e + i;
s >= 0 && s + n.width <= window.innerWidth ? (l.is_valid = !0, l.axis = s) : (l.is_valid = !1, l.axis = s);
if (l === "right") {
const o = a.right + e + i;
o >= 0 && o + s.width <= window.innerWidth ? (n.is_valid = !0, n.axis = o) : (n.is_valid = !1, n.axis = o);
}
return l;
}, W = function({
align: o,
return n;
}, J = function({
align: l,
target: t

@@ -750,13 +788,13 @@ }) {

};
if (o === "top" && (e.y + i.height <= window.innerHeight && e.y >= 0 ? (a.is_valid = !0, a.alignment = e.y) : (a.is_valid = !1, a.alignment = e.y)), o === "center") {
const n = e.height / 2, l = i.height / 2, s = e.y + n - l;
s + e.height <= window.innerHeight && s >= 0 ? (a.is_valid = !0, a.alignment = s) : (a.is_valid = !1, a.alignment = s);
if (l === "top" && (e.y + i.height <= window.innerHeight && e.y >= 0 ? (a.is_valid = !0, a.alignment = e.y) : (a.is_valid = !1, a.alignment = e.y)), l === "center") {
const s = e.height / 2, n = i.height / 2, o = e.y + s - n;
o + e.height <= window.innerHeight && o >= 0 ? (a.is_valid = !0, a.alignment = o) : (a.is_valid = !1, a.alignment = o);
}
if (o === "bottom") {
const n = e.bottom - i.height;
n + i.height <= window.innerHeight && n >= 0 ? (a.is_valid = !0, a.alignment = n) : (a.is_valid = !1, a.alignment = n);
if (l === "bottom") {
const s = e.bottom - i.height;
s + i.height <= window.innerHeight && s >= 0 ? (a.is_valid = !0, a.alignment = s) : (a.is_valid = !1, a.alignment = s);
}
return a;
}, B = function({
align: o,
}, Y = function({
align: l,
target: t

@@ -768,13 +806,13 @@ }) {

};
if (o === "left" && (e.x + i.width <= window.innerWidth && e.x >= 0 ? (a.is_valid = !0, a.alignment = e.x) : (a.is_valid = !1, a.alignment = e.x)), o === "center") {
const n = e.width / 2, l = i.width / 2, s = e.x + n - l;
s >= 0 && s + i.width <= window.innerWidth ? (a.is_valid = !0, a.alignment = s) : (a.is_valid = !1, a.alignment = s);
if (l === "left" && (e.x + i.width <= window.innerWidth && e.x >= 0 ? (a.is_valid = !0, a.alignment = e.x) : (a.is_valid = !1, a.alignment = e.x)), l === "center") {
const s = e.width / 2, n = i.width / 2, o = e.x + s - n;
o >= 0 && o + i.width <= window.innerWidth ? (a.is_valid = !0, a.alignment = o) : (a.is_valid = !1, a.alignment = o);
}
if (o === "right") {
const n = e.right - i.width;
n + i.width <= window.innerWidth && n >= 0 ? (a.is_valid = !0, a.alignment = n) : (a.is_valid = !1, a.alignment = n);
if (l === "right") {
const s = e.right - i.width;
s + i.width <= window.innerWidth && s >= 0 ? (a.is_valid = !0, a.alignment = s) : (a.is_valid = !1, a.alignment = s);
}
return a;
};
class wt {
class Ct {
constructor({

@@ -785,3 +823,3 @@ ajala: t,

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

@@ -799,17 +837,17 @@ calculatePlacmentDelta({ active_index: t }) {

if (!i) return e;
const a = i.getBoundingClientRect(), { spotlight: n } = this.placement.getMetadata({
const a = i.getBoundingClientRect(), { spotlight: s } = this.placement.getMetadata({
next_index: t
});
return e.x = Math.max(0, a.x - n.padding), e.y = Math.max(0, a.y - n.padding), e.width = Math.min(
return e.x = Math.max(0, a.x - s.padding), e.y = Math.max(0, a.y - s.padding), e.width = Math.min(
window.innerWidth,
a.width + n.padding * 2
a.width + s.padding * 2
), e.height = Math.min(
window.innerWidth,
a.height + n.padding * 2
), e.border_radius = n.border_radius, e;
a.height + s.padding * 2
), e.border_radius = s.border_radius, e;
}
}
class xt {
class Et {
constructor({ ajala: t, ui: e }) {
d(this, "ajala"), d(this, "arrow"), d(this, "tooltip"), d(this, "overlay_cutout_svg_rect"), d(this, "ui"), d(this, "animations"), this.arrow = new ft({ ajala: t, ui: e, placement: this }), this.tooltip = new yt({ ajala: t, ui: e, placement: this }), this.overlay_cutout_svg_rect = new wt({
p(this, "ajala"), p(this, "arrow"), p(this, "tooltip"), p(this, "overlay_cutout_svg_rect"), p(this, "ui"), p(this, "animations"), this.arrow = new xt({ ajala: t, ui: e, placement: this }), this.tooltip = new jt({ ajala: t, ui: e, placement: this }), this.overlay_cutout_svg_rect = new Ct({
ajala: t,

@@ -825,11 +863,11 @@ ui: e,

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

@@ -841,4 +879,4 @@ };

}
var q, U;
class jt {
var W, Z;
class St {
constructor({

@@ -849,3 +887,3 @@ ajala: t,

}) {
E(this, q), d(this, "ajala"), d(this, "ui"), d(this, "placement"), d(this, "transition_type"), d(this, "is_animating", !1), d(this, "transition");
S(this, W), p(this, "ajala"), p(this, "ui"), p(this, "placement"), p(this, "transition_type"), p(this, "is_animating", !1), p(this, "transition");
var a;

@@ -870,19 +908,19 @@ this.ajala = t, this.ui = e, this.placement = i, this.transition_type = ((a = this.ajala.options) == null ? void 0 : a.transition_type) || "traveller", this.transition = {

},
onUpdate: n = () => {
onUpdate: s = () => {
},
onComplete: l = () => {
onComplete: n = () => {
}
}) {
const s = performance.now();
let c = !0, h;
const p = (u) => u < 0.5 ? 2 * u * u : 1 - Math.pow(-2 * u + 2, 2) / 2;
const o = performance.now();
let h = !0, d;
const _ = (c) => c < 0.5 ? 2 * c * c : 1 - Math.pow(-2 * c + 2, 2) / 2;
a();
const r = (u) => {
if (!c) return;
const m = u - s, v = Math.min(m / i, 1), g = p(v), y = $(t, e, g);
n(y), v < 1 ? (h = requestAnimationFrame(r), this.is_animating = !0) : (l(), this.is_animating = !1);
const r = (c) => {
if (!h) return;
const u = c - o, y = Math.min(u / i, 1), f = _(y), w = T(t, e, f);
s(w), y < 1 ? (d = requestAnimationFrame(r), this.is_animating = !0) : (n(), this.is_animating = !1);
};
return h = requestAnimationFrame(r), {
return d = requestAnimationFrame(r), {
stop: () => {
c = !1, cancelAnimationFrame(h);
h = !1, cancelAnimationFrame(d);
}

@@ -893,12 +931,12 @@ };

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

@@ -914,3 +952,3 @@ window.scrollTo(0, r);

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

@@ -922,9 +960,9 @@ });

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

@@ -938,3 +976,3 @@ },

height: 0,
border_radius: l
border_radius: n
});

@@ -951,8 +989,8 @@ }

const {
x_delta: n,
x_offset: l,
y_delta: s,
y_offset: c,
tooltip_rect: h,
active_index: p
x_delta: s,
x_offset: n,
y_delta: o,
y_offset: h,
tooltip_rect: d,
active_index: _
} = t;

@@ -962,6 +1000,6 @@ this.animate({

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

@@ -972,3 +1010,3 @@ onComplete: () => {

onPlay: () => {
this.ui.tooltip_container_element.style.visibility = "visible", this.spotlightTarget(p), i && i();
this.ui.tooltip_container_element.style.visibility = "visible", this.spotlightTarget(_), i && i();
}

@@ -984,9 +1022,9 @@ });

if (t.is_valid) {
const { x_delta: n, y_delta: l, active_index: s } = t;
const { x_delta: s, y_delta: n, active_index: o } = t;
this.animate({
from: 0,
to: 1,
duration: f(this, q, U).call(this, s),
onUpdate(c) {
a.style.visibility = "visible", a.style.transform = `translate(${n}px, ${l}px) scale(${c})`;
duration: g(this, W, Z).call(this, o),
onUpdate(h) {
a.style.visibility = "visible", a.style.transform = `translate(${s}px, ${n}px) scale(${h})`;
},

@@ -997,3 +1035,3 @@ onComplete: () => {

onPlay: () => {
this.spotlightTarget(s), i && i();
this.spotlightTarget(o), i && i();
}

@@ -1004,24 +1042,24 @@ });

}
q = /* @__PURE__ */ new WeakSet(), U = function(o) {
W = /* @__PURE__ */ new WeakSet(), Z = function(l) {
var t, e;
return ((t = this.ajala.flatten_steps[o]) == null ? void 0 : t.transition_duration) ?? ((e = this.ajala.options) == null ? void 0 : e.transition_duration) ?? 1e3;
return ((t = this.ajala.flatten_steps[l]) == null ? void 0 : t.transition_duration) ?? ((e = this.ajala.options) == null ? void 0 : e.transition_duration) ?? 1e3;
};
var x, w, b, L, A, D, nt, st;
class bt extends gt {
var j, x, C, $, H, I, rt, ht;
class Lt extends wt {
constructor(t, { start_immediately: e = !0, ...i } = {
start_immediately: !0
}) {
super(), E(this, D), d(this, "options"), d(this, "is_active"), d(this, "original_steps"), d(this, "flatten_steps"), E(this, x), d(this, "active_step"), E(this, w), E(this, b), E(this, L), E(this, A);
const a = I(t);
this.options = { start_immediately: e, ...i }, this.is_active = !!this.options.start_immediately, this.original_steps = a, S(this, x, {
super(), S(this, I), p(this, "options"), p(this, "is_active"), p(this, "initialized"), p(this, "original_steps"), p(this, "flatten_steps"), S(this, j), p(this, "active_step"), S(this, x), S(this, C), S(this, $), S(this, H);
const a = N(t);
this.options = { start_immediately: e, ...i }, this.is_active = !!this.options.start_immediately, this.original_steps = a, L(this, j, {
instances: [],
queries: {}
}), this.flatten_steps = [], this.active_step = this.flatten_steps[0], S(this, w, new mt(this)), S(this, b, new vt({
}), this.flatten_steps = [], this.initialized = !0, this.active_step = this.flatten_steps[0], L(this, x, new ft(this)), L(this, C, new yt({
ajala: this,
ui: _(this, w)
})), S(this, L, new xt({ ajala: this, ui: _(this, w) })), S(this, A, new jt({
ui: m(this, x)
})), L(this, $, new Et({ ajala: this, ui: m(this, x) })), L(this, H, new St({
ajala: this,
ui: _(this, w),
placement: _(this, L)
})), _(this, w).navigation = _(this, b), _(this, w).placement = _(this, L), _(this, b).placement = _(this, L), _(this, b).animations = _(this, A), _(this, L).animations = _(this, A), this.destroy = this.destroy.bind(this);
ui: m(this, x),
placement: m(this, $)
})), m(this, x).navigation = m(this, C), m(this, x).placement = m(this, $), m(this, C).placement = m(this, $), m(this, C).animations = m(this, H), m(this, $).animations = m(this, H), this.destroy = this.destroy.bind(this);
}

@@ -1031,11 +1069,12 @@ /**

*/
init() {
const t = I(this.original_steps);
this.is_active = !!this.options.start_immediately, this.original_steps = t, S(this, x, {
init(t) {
this.initialized = !0;
const e = N(this.original_steps);
this.is_active = !!this.options.start_immediately, this.original_steps = e, L(this, j, {
instances: [],
queries: Q(t)
}), this.flatten_steps = V(
t,
_(this, x).queries
), this.active_step = this.flatten_steps[0], f(this, D, st).call(this), this.active_step = this.flatten_steps[0], this.is_active = !!this.options.start_immediately, _(this, w).init(), _(this, b).init(), this.is_active && this.options.start_immediately && this.start();
queries: et(e)
}), this.flatten_steps = it(
e,
m(this, j).queries
), this.active_step = this.flatten_steps[0], g(this, I, ht).call(this), this.active_step = this.flatten_steps[0], this.is_active = !!this.options.start_immediately, m(this, x).init(), m(this, C).init(), (this.options.start_immediately || t) && this.start();
}

@@ -1087,9 +1126,9 @@ /**

updateSteps(t, e = !0) {
const i = I(t);
this.original_steps = i, S(this, x, {
const i = N(t);
this.original_steps = i, L(this, j, {
instances: [],
queries: Q(i)
}), this.flatten_steps = V(
queries: et(i)
}), this.flatten_steps = it(
i,
_(this, x).queries
m(this, j).queries
), this.active_step = this.flatten_steps[0], e && this.restart();

@@ -1116,6 +1155,20 @@ }

/**
* @desc Check if the current active step is the last step in ajala journey.
* @returns Boolean
*/
isLastStep() {
return this.getActiveStepFlattenIndex() === this.flatten_steps.length - 1;
}
/**
* @desc Check if the current active step is the first step in ajala journey.
* @returns Boolean
*/
isFirstStep() {
return this.getActiveStepFlattenIndex() === 0;
}
/**
* @desc starts ajala.
*/
start() {
this.is_active = !0, this.active_step = this.flatten_steps[0], _(this, w).start(), _(this, b).start(), this.dispatchEvent({
this.is_active = !0, this.active_step = this.flatten_steps[0], m(this, x).start(), m(this, C).start(), this.dispatchEvent({
type: "onStart",

@@ -1130,3 +1183,3 @@ data: this

restart() {
this.destroy(), this.init();
this.destroy(), this.init(!0);
}

@@ -1137,3 +1190,3 @@ /**

next() {
this.is_active && _(this, b).next();
this.is_active && m(this, C).next();
}

@@ -1144,3 +1197,3 @@ /**

prev() {
this.is_active && _(this, b).prev();
this.is_active && m(this, C).prev();
}

@@ -1154,3 +1207,3 @@ /**

const e = this.flatten_steps.findIndex((i) => i.id === t);
e > -1 && _(this, b).goTo(e);
e > -1 && m(this, C).goTo(e);
}

@@ -1161,3 +1214,3 @@ /**

refresh() {
this.is_active && _(this, w).refresh();
this.is_active && m(this, x).refresh();
}

@@ -1168,15 +1221,15 @@ /**

destroy() {
f(this, D, nt).call(this), _(this, w).destroy(), this.is_active = !1;
g(this, I, rt).call(this), m(this, x).destroy(), this.is_active = !1;
}
}
x = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakSet(), nt = function() {
_(this, x).instances.forEach((o) => {
o.onchange = null;
}), _(this, w).cleanUp(), _(this, b).cleanUp();
}, st = function() {
for (const [o, t] of Object.entries(
_(this, x).queries
j = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakSet(), rt = function() {
m(this, j).instances.forEach((l) => {
l.onchange = null;
}), m(this, x).cleanUp(), m(this, C).cleanUp();
}, ht = function() {
for (const [l, t] of Object.entries(
m(this, j).queries
)) {
const e = window.matchMedia(o);
e.matches && (this.flatten_steps = k(
const e = window.matchMedia(l);
e.matches && (this.flatten_steps = M(
this.flatten_steps,

@@ -1186,25 +1239,25 @@ t,

)), e.onchange = (i) => {
const a = _(this, x).queries[i.media];
i.matches && a ? this.flatten_steps = k(
const a = m(this, j).queries[i.media];
i.matches && a ? this.flatten_steps = M(
this.flatten_steps,
a,
"value"
) : (a && (this.flatten_steps = k(
) : (a && (this.flatten_steps = M(
this.flatten_steps,
a,
"default"
)), _(this, x).instances.forEach((n) => {
const l = _(this, x).queries[n.media];
n.matches && l && (this.flatten_steps = k(
)), m(this, j).instances.forEach((s) => {
const n = m(this, j).queries[s.media];
s.matches && n && (this.flatten_steps = M(
this.flatten_steps,
l,
n,
"value"
));
})), this.goToStep(this.flatten_steps[0].id);
}, _(this, x).instances.push(e);
}, m(this, j).instances.push(e);
}
};
const lt = ht(null);
function $t({
children: o,
const dt = mt(null);
function Ot({
children: l,
getInstance: t,

@@ -1214,58 +1267,69 @@ steps: e,

CustomArrow: a,
options: n
options: s,
...n
}) {
const [l, s] = H(
const [o, h] = q(
{}
), [c, h] = H(), [p, r] = H(null), [u, m] = H(null);
return ct(() => {
let v = null, g = null;
const y = document.createElement("div");
i && (v = y), a && (g = y);
const ot = {
...n,
custom_tooltip: v,
custom_arrow: g
}, j = new bt(e, ot), z = () => {
h(j.getActiveStep());
}, J = () => {
h(j.getActiveStep());
}, N = (T) => {
var Z, Y;
r((Z = T == null ? void 0 : T.data) == null ? void 0 : Z.tooltip_container_element), m((Y = T == null ? void 0 : T.data) == null ? void 0 : Y.arrow_element), y.remove();
), [d, _] = q(), [r, c] = q(null), [u, y] = q(null);
return z(() => {
let f = null, w = null;
const B = document.createElement("div");
i && (f = B), a && (w = B);
const pt = {
...s,
custom_tooltip: f,
custom_arrow: w
}, v = new Lt(e, pt), K = () => {
_(v.getActiveStep());
}, Q = () => {
_(v.getActiveStep());
}, V = (b) => {
var X, k;
c((X = b == null ? void 0 : b.data) == null ? void 0 : X.tooltip_container_element), y((k = b == null ? void 0 : b.data) == null ? void 0 : k.arrow_element), B.remove();
};
return j.addEventListener(
return v.addEventListener(
"onAfterDomInsert",
N
), j.addEventListener("onStart", z), j.addEventListener(
V
), v.addEventListener("onStart", K), v.addEventListener(
"onTransitionComplete",
J
), j.init(), t && t(j), s(j), () => {
j.removeEventListener("onStart", z), j.removeEventListener(
Q
), n != null && n.onStart && v.addEventListener("onStart", n.onStart), n != null && n.onFinish && v.addEventListener("onFinish", n.onFinish), n != null && n.onClose && v.addEventListener("onClose", n.onClose), n != null && n.onNext && v.addEventListener("onNext", n.onNext), n != null && n.onPrev && v.addEventListener("onPrev", n.onPrev), n != null && n.onTransitionComplete && v.addEventListener(
"onTransitionComplete",
n.onTransitionComplete
), v.init(), t && t(v), h(v), () => {
v.removeEventListener("onStart", K), v.removeEventListener(
"onAfterDomInsert",
N
), j.removeEventListener(
V
), v.removeEventListener(
"onTransitionComplete",
J
), j.destroy();
Q
), n != null && n.onStart && v.removeEventListener("onStart", n.onStart), n != null && n.onFinish && v.removeEventListener("onFinish", n.onFinish), n != null && n.onClose && v.removeEventListener("onClose", n.onClose), n != null && n.onNext && v.removeEventListener("onNext", n.onNext), n != null && n.onPrev && v.removeEventListener("onPrev", n.onPrev), n != null && n.onTransitionComplete && v.removeEventListener(
"onTransitionComplete",
n.onTransitionComplete
), v.destroy();
};
}, []), /* @__PURE__ */ rt(lt.Provider, { value: l, children: [
o,
i && p && K(
/* @__PURE__ */ G(i, { active_step: c, ajala: l }),
p
}, []), z(() => {
o != null && o.initialized && (s == null || delete s.custom_tooltip, s == null || delete s.custom_arrow, o.updateOptions(s, !0));
}, [s]), z(() => {
o != null && o.initialized && o.updateSteps(e, !0);
}, [e]), /* @__PURE__ */ _t(dt.Provider, { value: o, children: [
l,
i && r && tt(
/* @__PURE__ */ F(i, { active_step: d, ajala: o }),
r
),
a && u && K(/* @__PURE__ */ G(a, {}), u)
a && u && tt(/* @__PURE__ */ F(a, {}), u)
] });
}
function Lt() {
const o = dt(lt);
if (!o)
function Mt() {
const l = ct(dt);
if (!l)
throw new Error(
"useAjalaJourneyContext must be used within a <AjalaJourneyProvider />"
);
return o;
return l;
}
export {
$t as AjalaJourneyProvider,
Lt as useAjalaJourneyContext
Ot as AjalaJourneyProvider,
Mt as useAjalaJourneyContext
};

4

package.json
{
"name": "react-ajala",
"private": false,
"version": "0.1.0",
"version": "0.2.0",
"type": "module",

@@ -22,3 +22,3 @@ "main": "./dist/react-ajala.cjs",

"dependencies": {
"ajala.js": "^0.3.1"
"ajala.js": "^0.3.5"
},

@@ -25,0 +25,0 @@ "peerDependencies": {

dist/react-ajala.cjs

Sorry, the diff of this file is not supported yet