UNPKG

driver.js

Version:

<h1 align="center"><img height="150" src="https://driverjs.com/driver.svg" /><br> Driver.js</h1>

676 lines (675 loc) 27.2 kB
let z = {}, J; function F(e = {}) { z = { animate: !0, allowClose: !0, overlayClickBehavior: "close", overlayOpacity: 0.7, smoothScroll: !1, disableActiveInteraction: !1, showProgress: !1, stagePadding: 10, stageRadius: 5, popoverOffset: 10, showButtons: ["next", "previous", "close"], disableButtons: [], overlayColor: "#000", ...e }; } function s(e) { return e ? z[e] : z; } function le(e) { J = e; } function _() { return J; } let I = {}; function N(e, o) { I[e] = o; } function L(e) { var o; (o = I[e]) == null || o.call(I); } function de() { I = {}; } function O(e, o, t, i) { return (e /= i / 2) < 1 ? t / 2 * e * e + o : -t / 2 * (--e * (e - 2) - 1) + o; } function U(e) { const o = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'; return e.flatMap((t) => { const i = t.matches(o), d = Array.from(t.querySelectorAll(o)); return [...i ? [t] : [], ...d]; }).filter((t) => getComputedStyle(t).pointerEvents !== "none" && ve(t)); } function ee(e) { if (!e || ue(e)) return; const o = s("smoothScroll"), t = e.offsetHeight > window.innerHeight; e.scrollIntoView({ // Removing the smooth scrolling for elements which exist inside the scrollable parent // This was causing the highlight to not properly render behavior: !o || pe(e) ? "auto" : "smooth", inline: "center", block: t ? "start" : "center" }); } function pe(e) { if (!e || !e.parentElement) return; const o = e.parentElement; return o.scrollHeight > o.clientHeight; } function ue(e) { const o = e.getBoundingClientRect(); return o.top >= 0 && o.left >= 0 && o.bottom <= (window.innerHeight || document.documentElement.clientHeight) && o.right <= (window.innerWidth || document.documentElement.clientWidth); } function ve(e) { return !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length); } let D = {}; function k(e, o) { D[e] = o; } function l(e) { return e ? D[e] : D; } function X() { D = {}; } function fe(e, o, t, i) { let d = l("__activeStagePosition"); const n = d || t.getBoundingClientRect(), f = i.getBoundingClientRect(), w = O(e, n.x, f.x - n.x, o), r = O(e, n.y, f.y - n.y, o), v = O(e, n.width, f.width - n.width, o), g = O(e, n.height, f.height - n.height, o); d = { x: w, y: r, width: v, height: g }, oe(d), k("__activeStagePosition", d); } function te(e) { if (!e) return; const o = e.getBoundingClientRect(), t = { x: o.x, y: o.y, width: o.width, height: o.height }; k("__activeStagePosition", t), oe(t); } function he() { const e = l("__activeStagePosition"), o = l("__overlaySvg"); if (!e) return; if (!o) { console.warn("No stage svg found."); return; } const t = window.innerWidth, i = window.innerHeight; o.setAttribute("viewBox", `0 0 ${t} ${i}`); } function ge(e) { const o = we(e); document.body.appendChild(o), re(o, (t) => { t.target.tagName === "path" && L("overlayClick"); }), k("__overlaySvg", o); } function oe(e) { const o = l("__overlaySvg"); if (!o) { ge(e); return; } const t = o.firstElementChild; if ((t == null ? void 0 : t.tagName) !== "path") throw new Error("no path element found in stage svg"); t.setAttribute("d", ie(e)); } function we(e) { const o = window.innerWidth, t = window.innerHeight, i = document.createElementNS("http://www.w3.org/2000/svg", "svg"); i.classList.add("driver-overlay", "driver-overlay-animated"), i.setAttribute("viewBox", `0 0 ${o} ${t}`), i.setAttribute("xmlSpace", "preserve"), i.setAttribute("xmlnsXlink", "http://www.w3.org/1999/xlink"), i.setAttribute("version", "1.1"), i.setAttribute("preserveAspectRatio", "xMinYMin slice"), i.style.fillRule = "evenodd", i.style.clipRule = "evenodd", i.style.strokeLinejoin = "round", i.style.strokeMiterlimit = "2", i.style.zIndex = "10000", i.style.position = "fixed", i.style.top = "0", i.style.left = "0", i.style.width = "100%", i.style.height = "100%"; const d = document.createElementNS("http://www.w3.org/2000/svg", "path"); return d.setAttribute("d", ie(e)), d.style.fill = s("overlayColor") || "rgb(0,0,0)", d.style.opacity = `${s("overlayOpacity")}`, d.style.pointerEvents = "auto", d.style.cursor = "auto", i.appendChild(d), i; } function ie(e) { const o = window.innerWidth, t = window.innerHeight, i = s("stagePadding") || 0, d = s("stageRadius") || 0, n = e.width + i * 2, f = e.height + i * 2, w = Math.min(d, n / 2, f / 2), r = Math.floor(Math.max(w, 0)), v = e.x - i + r, g = e.y - i, y = n - r * 2, a = f - r * 2; return `M${o},0L0,0L0,${t}L${o},${t}L${o},0Z M${v},${g} h${y} a${r},${r} 0 0 1 ${r},${r} v${a} a${r},${r} 0 0 1 -${r},${r} h-${y} a${r},${r} 0 0 1 -${r},-${r} v-${a} a${r},${r} 0 0 1 ${r},-${r} z`; } function me() { const e = l("__overlaySvg"); e && e.remove(); } function ye() { const e = document.getElementById("driver-dummy-element"); if (e) return e; let o = document.createElement("div"); return o.id = "driver-dummy-element", o.style.width = "0", o.style.height = "0", o.style.pointerEvents = "none", o.style.opacity = "0", o.style.position = "fixed", o.style.top = "50%", o.style.left = "50%", document.body.appendChild(o), o; } function j(e) { const { element: o } = e; let t = typeof o == "function" ? o() : typeof o == "string" ? document.querySelector(o) : o; t || (t = ye()), be(t, e); } function xe() { const e = l("__activeElement"), o = l("__activeStep"); e && (te(e), he(), ae(e, o)); } function be(e, o) { var C; const i = Date.now(), d = l("__activeStep"), n = l("__activeElement") || e, f = !n || n === e, w = e.id === "driver-dummy-element", r = n.id === "driver-dummy-element", v = s("animate"), g = o.onHighlightStarted || s("onHighlightStarted"), y = (o == null ? void 0 : o.onHighlighted) || s("onHighlighted"), a = (d == null ? void 0 : d.onDeselected) || s("onDeselected"), p = s(), c = l(); !f && a && a(r ? void 0 : n, d, { config: p, state: c, driver: _() }), g && g(w ? void 0 : e, o, { config: p, state: c, driver: _() }); const u = !f && v; let h = !1; Se(), k("previousStep", d), k("previousElement", n), k("activeStep", o), k("activeElement", e); const m = () => { if (l("__transitionCallback") !== m) return; const b = Date.now() - i, E = 400 - b <= 400 / 2; o.popover && E && !h && u && (Q(e, o), h = !0), s("animate") && b < 400 ? fe(b, 400, n, e) : (te(e), y && y(w ? void 0 : e, o, { config: s(), state: l(), driver: _() }), k("__transitionCallback", void 0), k("__previousStep", d), k("__previousElement", n), k("__activeStep", o), k("__activeElement", e)), window.requestAnimationFrame(m); }; k("__transitionCallback", m), window.requestAnimationFrame(m), ee(e), !u && o.popover && Q(e, o), n.classList.remove("driver-active-element", "driver-no-interaction"), n.removeAttribute("aria-haspopup"), n.removeAttribute("aria-expanded"), n.removeAttribute("aria-controls"), ((C = o.disableActiveInteraction) != null ? C : s("disableActiveInteraction")) && e.classList.add("driver-no-interaction"), e.classList.add("driver-active-element"), e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-expanded", "true"), e.setAttribute("aria-controls", "driver-popover-content"); } function Ce() { var e; (e = document.getElementById("driver-dummy-element")) == null || e.remove(), document.querySelectorAll(".driver-active-element").forEach((o) => { o.classList.remove("driver-active-element", "driver-no-interaction"), o.removeAttribute("aria-haspopup"), o.removeAttribute("aria-expanded"), o.removeAttribute("aria-controls"); }); } function M() { const e = l("__resizeTimeout"); e && window.cancelAnimationFrame(e), k("__resizeTimeout", window.requestAnimationFrame(xe)); } function Pe(e) { var r; if (!l("isInitialized") || !(e.key === "Tab" || e.keyCode === 9)) return; const i = l("__activeElement"), d = (r = l("popover")) == null ? void 0 : r.wrapper, n = U([ ...d ? [d] : [], ...i ? [i] : [] ]), f = n[0], w = n[n.length - 1]; if (e.preventDefault(), e.shiftKey) { const v = n[n.indexOf(document.activeElement) - 1] || w; v == null || v.focus(); } else { const v = n[n.indexOf(document.activeElement) + 1] || f; v == null || v.focus(); } } function ne(e) { var t; ((t = s("allowKeyboardControl")) == null || t) && (e.key === "Escape" ? L("escapePress") : e.key === "ArrowRight" ? L("arrowRightPress") : e.key === "ArrowLeft" && L("arrowLeftPress")); } function re(e, o, t) { const i = (n, f) => { const w = n.target; e.contains(w) && ((!t || t(w)) && (n.preventDefault(), n.stopPropagation(), n.stopImmediatePropagation()), f == null || f(n)); }; document.addEventListener("pointerdown", i, !0), document.addEventListener("mousedown", i, !0), document.addEventListener("pointerup", i, !0), document.addEventListener("mouseup", i, !0), document.addEventListener( "click", (n) => { i(n, o); }, !0 ); } function ke() { window.addEventListener("keyup", ne, !1), window.addEventListener("keydown", Pe, !1), window.addEventListener("resize", M), window.addEventListener("scroll", M); } function _e() { window.removeEventListener("keyup", ne), window.removeEventListener("resize", M), window.removeEventListener("scroll", M); } function Se() { const e = l("popover"); e && (e.wrapper.style.display = "none"); } function Q(e, o) { var b, P; let t = l("popover"); t && document.body.removeChild(t.wrapper), t = Le(), document.body.appendChild(t.wrapper); const { title: i, description: d, showButtons: n, disableButtons: f, showProgress: w, nextBtnText: r = s("nextBtnText") || "Next &rarr;", prevBtnText: v = s("prevBtnText") || "&larr; Previous", progressText: g = s("progressText") || "{current} of {total}" } = o.popover || {}; t.nextButton.innerHTML = r, t.previousButton.innerHTML = v, t.progress.innerHTML = g, i ? (t.title.innerHTML = i, t.title.style.display = "block") : t.title.style.display = "none", d ? (t.description.innerHTML = d, t.description.style.display = "block") : t.description.style.display = "none"; const y = n || s("showButtons"), a = w || s("showProgress") || !1, p = (y == null ? void 0 : y.includes("next")) || (y == null ? void 0 : y.includes("previous")) || a; t.closeButton.style.display = y.includes("close") ? "block" : "none", p ? (t.footer.style.display = "flex", t.progress.style.display = a ? "block" : "none", t.nextButton.style.display = y.includes("next") ? "block" : "none", t.previousButton.style.display = y.includes("previous") ? "block" : "none") : t.footer.style.display = "none"; const c = f || s("disableButtons") || []; c != null && c.includes("next") && (t.nextButton.disabled = !0, t.nextButton.classList.add("driver-popover-btn-disabled")), c != null && c.includes("previous") && (t.previousButton.disabled = !0, t.previousButton.classList.add("driver-popover-btn-disabled")), c != null && c.includes("close") && (t.closeButton.disabled = !0, t.closeButton.classList.add("driver-popover-btn-disabled")); const u = t.wrapper; u.style.display = "block", u.style.left = "", u.style.top = "", u.style.bottom = "", u.style.right = "", u.id = "driver-popover-content", u.setAttribute("role", "dialog"), u.setAttribute("aria-labelledby", "driver-popover-title"), u.setAttribute("aria-describedby", "driver-popover-description"); const h = t.arrow; h.className = "driver-popover-arrow"; const m = ((b = o.popover) == null ? void 0 : b.popoverClass) || s("popoverClass") || ""; u.className = `driver-popover ${m}`.trim(), re( t.wrapper, (E) => { var B, R, W; const T = E.target, A = ((B = o.popover) == null ? void 0 : B.onNextClick) || s("onNextClick"), H = ((R = o.popover) == null ? void 0 : R.onPrevClick) || s("onPrevClick"), $ = ((W = o.popover) == null ? void 0 : W.onCloseClick) || s("onCloseClick"); if (T.closest(".driver-popover-next-btn")) return A ? A(e, o, { config: s(), state: l(), driver: _() }) : L("nextClick"); if (T.closest(".driver-popover-prev-btn")) return H ? H(e, o, { config: s(), state: l(), driver: _() }) : L("prevClick"); if (T.closest(".driver-popover-close-btn")) return $ ? $(e, o, { config: s(), state: l(), driver: _() }) : L("closeClick"); }, (E) => !(t != null && t.description.contains(E)) && !(t != null && t.title.contains(E)) && typeof E.className == "string" && E.className.includes("driver-popover") ), k("popover", t); const x = ((P = o.popover) == null ? void 0 : P.onPopoverRender) || s("onPopoverRender"); x && x(t, { config: s(), state: l(), driver: _() }), ae(e, o), ee(u); const C = e.classList.contains("driver-dummy-element"), S = U([u, ...C ? [] : [e]]); S.length > 0 && S[0].focus(); } function se() { const e = l("popover"); if (!(e != null && e.wrapper)) return; const o = e.wrapper.getBoundingClientRect(), t = s("stagePadding") || 0, i = s("popoverOffset") || 0; return { width: o.width + t + i, height: o.height + t + i, realWidth: o.width, realHeight: o.height }; } function Z(e, o) { const { elementDimensions: t, popoverDimensions: i, popoverPadding: d, popoverArrowDimensions: n } = o; return e === "start" ? Math.max( Math.min( t.top - d, window.innerHeight - i.realHeight - n.width ), n.width ) : e === "end" ? Math.max( Math.min( t.top - (i == null ? void 0 : i.realHeight) + t.height + d, window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width ), n.width ) : e === "center" ? Math.max( Math.min( t.top + t.height / 2 - (i == null ? void 0 : i.realHeight) / 2, window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width ), n.width ) : 0; } function G(e, o) { const { elementDimensions: t, popoverDimensions: i, popoverPadding: d, popoverArrowDimensions: n } = o; return e === "start" ? Math.max( Math.min( t.left - d, window.innerWidth - i.realWidth - n.width ), n.width ) : e === "end" ? Math.max( Math.min( t.left - (i == null ? void 0 : i.realWidth) + t.width + d, window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width ), n.width ) : e === "center" ? Math.max( Math.min( t.left + t.width / 2 - (i == null ? void 0 : i.realWidth) / 2, window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width ), n.width ) : 0; } function ae(e, o) { const t = l("popover"); if (!t) return; const { align: i = "start", side: d = "left" } = (o == null ? void 0 : o.popover) || {}, n = i, f = e.id === "driver-dummy-element" ? "over" : d, w = s("stagePadding") || 0, r = se(), v = t.arrow.getBoundingClientRect(), g = e.getBoundingClientRect(), y = g.top - r.height; let a = y >= 0; const p = window.innerHeight - (g.bottom + r.height); let c = p >= 0; const u = g.left - r.width; let h = u >= 0; const m = window.innerWidth - (g.right + r.width); let x = m >= 0; const C = !a && !c && !h && !x; let S = f; if (f === "top" && a ? x = h = c = !1 : f === "bottom" && c ? x = h = a = !1 : f === "left" && h ? x = a = c = !1 : f === "right" && x && (h = a = c = !1), f === "over") { const b = window.innerWidth / 2 - r.realWidth / 2, P = window.innerHeight / 2 - r.realHeight / 2; t.wrapper.style.left = `${b}px`, t.wrapper.style.right = "auto", t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto"; } else if (C) { const b = window.innerWidth / 2 - (r == null ? void 0 : r.realWidth) / 2, P = 10; t.wrapper.style.left = `${b}px`, t.wrapper.style.right = "auto", t.wrapper.style.bottom = `${P}px`, t.wrapper.style.top = "auto"; } else if (h) { const b = Math.min( u, window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width ), P = Z(n, { elementDimensions: g, popoverDimensions: r, popoverPadding: w, popoverArrowDimensions: v }); t.wrapper.style.left = `${b}px`, t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", S = "left"; } else if (x) { const b = Math.min( m, window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width ), P = Z(n, { elementDimensions: g, popoverDimensions: r, popoverPadding: w, popoverArrowDimensions: v }); t.wrapper.style.right = `${b}px`, t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.left = "auto", S = "right"; } else if (a) { const b = Math.min( y, window.innerHeight - r.realHeight - v.width ); let P = G(n, { elementDimensions: g, popoverDimensions: r, popoverPadding: w, popoverArrowDimensions: v }); t.wrapper.style.top = `${b}px`, t.wrapper.style.left = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", S = "top"; } else if (c) { const b = Math.min( p, window.innerHeight - (r == null ? void 0 : r.realHeight) - v.width ); let P = G(n, { elementDimensions: g, popoverDimensions: r, popoverPadding: w, popoverArrowDimensions: v }); t.wrapper.style.left = `${P}px`, t.wrapper.style.bottom = `${b}px`, t.wrapper.style.top = "auto", t.wrapper.style.right = "auto", S = "bottom"; } C ? t.arrow.classList.add("driver-popover-arrow-none") : Ee(n, S, e); } function Ee(e, o, t) { const i = l("popover"); if (!i) return; const d = t.getBoundingClientRect(), n = se(), f = i.arrow, w = n.width, r = window.innerWidth, v = d.width, g = d.left, y = n.height, a = window.innerHeight, p = d.top, c = d.height; f.className = "driver-popover-arrow"; let u = o, h = e; if (o === "top" ? (g + v <= 0 ? (u = "right", h = "end") : g + v - w <= 0 && (u = "top", h = "start"), g >= r ? (u = "left", h = "end") : g + w >= r && (u = "top", h = "end")) : o === "bottom" ? (g + v <= 0 ? (u = "right", h = "start") : g + v - w <= 0 && (u = "bottom", h = "start"), g >= r ? (u = "left", h = "start") : g + w >= r && (u = "bottom", h = "end")) : o === "left" ? (p + c <= 0 ? (u = "bottom", h = "end") : p + c - y <= 0 && (u = "left", h = "start"), p >= a ? (u = "top", h = "end") : p + y >= a && (u = "left", h = "end")) : o === "right" && (p + c <= 0 ? (u = "bottom", h = "start") : p + c - y <= 0 && (u = "right", h = "start"), p >= a ? (u = "top", h = "start") : p + y >= a && (u = "right", h = "end")), !u) f.classList.add("driver-popover-arrow-none"); else { f.classList.add(`driver-popover-arrow-side-${u}`), f.classList.add(`driver-popover-arrow-align-${h}`); const m = t.getBoundingClientRect(), x = f.getBoundingClientRect(), C = s("stagePadding") || 0, S = m.left - C < window.innerWidth && m.right + C > 0 && m.top - C < window.innerHeight && m.bottom + C > 0; o === "bottom" && S && (x.x > m.x && x.x + x.width < m.x + m.width ? i.wrapper.style.transform = "translateY(0)" : (f.classList.remove(`driver-popover-arrow-align-${h}`), f.classList.add("driver-popover-arrow-none"), i.wrapper.style.transform = `translateY(-${C / 2}px)`)); } } function Le() { const e = document.createElement("div"); e.classList.add("driver-popover"); const o = document.createElement("div"); o.classList.add("driver-popover-arrow"); const t = document.createElement("header"); t.id = "driver-popover-title", t.classList.add("driver-popover-title"), t.style.display = "none", t.innerText = "Popover Title"; const i = document.createElement("div"); i.id = "driver-popover-description", i.classList.add("driver-popover-description"), i.style.display = "none", i.innerText = "Popover description is here"; const d = document.createElement("button"); d.type = "button", d.classList.add("driver-popover-close-btn"), d.setAttribute("aria-label", "Close"), d.innerHTML = "&times;"; const n = document.createElement("footer"); n.classList.add("driver-popover-footer"); const f = document.createElement("span"); f.classList.add("driver-popover-progress-text"), f.innerText = ""; const w = document.createElement("span"); w.classList.add("driver-popover-navigation-btns"); const r = document.createElement("button"); r.type = "button", r.classList.add("driver-popover-prev-btn"), r.innerHTML = "&larr; Previous"; const v = document.createElement("button"); return v.type = "button", v.classList.add("driver-popover-next-btn"), v.innerHTML = "Next &rarr;", w.appendChild(r), w.appendChild(v), n.appendChild(f), n.appendChild(w), e.appendChild(d), e.appendChild(o), e.appendChild(t), e.appendChild(i), e.appendChild(n), { wrapper: e, arrow: o, title: t, description: i, footer: n, previousButton: r, nextButton: v, closeButton: d, footerButtons: w, progress: f }; } function Te() { var o; const e = l("popover"); e && ((o = e.wrapper.parentElement) == null || o.removeChild(e.wrapper)); } function Ae(e = {}) { F(e); function o() { s("allowClose") && g(); } function t() { const a = s("overlayClickBehavior"); if (s("allowClose") && a === "close") { g(); return; } if (typeof a == "function") { const p = l("__activeStep"), c = l("__activeElement"); a(c, p, { config: s(), state: l(), driver: _() }); return; } a === "nextStep" && i(); } function i() { const a = l("activeIndex"), p = s("steps") || []; if (typeof a == "undefined") return; const c = a + 1; p[c] ? v(c) : g(); } function d() { const a = l("activeIndex"), p = s("steps") || []; if (typeof a == "undefined") return; const c = a - 1; p[c] ? v(c) : g(); } function n(a) { (s("steps") || [])[a] ? v(a) : g(); } function f() { var x; if (l("__transitionCallback")) return; const p = l("activeIndex"), c = l("__activeStep"), u = l("__activeElement"); if (typeof p == "undefined" || typeof c == "undefined" || typeof l("activeIndex") == "undefined") return; const m = ((x = c.popover) == null ? void 0 : x.onPrevClick) || s("onPrevClick"); if (m) return m(u, c, { config: s(), state: l(), driver: _() }); d(); } function w() { var m; if (l("__transitionCallback")) return; const p = l("activeIndex"), c = l("__activeStep"), u = l("__activeElement"); if (typeof p == "undefined" || typeof c == "undefined") return; const h = ((m = c.popover) == null ? void 0 : m.onNextClick) || s("onNextClick"); if (h) return h(u, c, { config: s(), state: l(), driver: _() }); i(); } function r() { l("isInitialized") || (k("isInitialized", !0), document.body.classList.add("driver-active", s("animate") ? "driver-fade" : "driver-simple"), ke(), N("overlayClick", t), N("escapePress", o), N("arrowLeftPress", f), N("arrowRightPress", w)); } function v(a = 0) { var $, B, R, W, V, q, K, Y; const p = s("steps"); if (!p) { console.error("No steps to drive through"), g(); return; } if (!p[a]) { g(); return; } k("__activeOnDestroyed", document.activeElement), k("activeIndex", a); const c = p[a], u = p[a + 1], h = p[a - 1], m = (($ = c.popover) == null ? void 0 : $.doneBtnText) || s("doneBtnText") || "Done", x = s("allowClose"), C = typeof ((B = c.popover) == null ? void 0 : B.showProgress) != "undefined" ? (R = c.popover) == null ? void 0 : R.showProgress : s("showProgress"), b = (((W = c.popover) == null ? void 0 : W.progressText) || s("progressText") || "{{current}} of {{total}}").replace("{{current}}", `${a + 1}`).replace("{{total}}", `${p.length}`), P = ((V = c.popover) == null ? void 0 : V.showButtons) || s("showButtons"), E = [ "next", "previous", ...x ? ["close"] : [] ].filter((ce) => !(P != null && P.length) || P.includes(ce)), T = ((q = c.popover) == null ? void 0 : q.onNextClick) || s("onNextClick"), A = ((K = c.popover) == null ? void 0 : K.onPrevClick) || s("onPrevClick"), H = ((Y = c.popover) == null ? void 0 : Y.onCloseClick) || s("onCloseClick"); j({ ...c, popover: { showButtons: E, nextBtnText: u ? void 0 : m, disableButtons: [...h ? [] : ["previous"]], showProgress: C, progressText: b, onNextClick: T || (() => { u ? v(a + 1) : g(); }), onPrevClick: A || (() => { v(a - 1); }), onCloseClick: H || (() => { g(); }), ...(c == null ? void 0 : c.popover) || {} } }); } function g(a = !0) { const p = l("__activeElement"), c = l("__activeStep"), u = l("__activeOnDestroyed"), h = s("onDestroyStarted"); if (a && h) { const C = !p || (p == null ? void 0 : p.id) === "driver-dummy-element"; h(C ? void 0 : p, c, { config: s(), state: l(), driver: _() }); return; } const m = (c == null ? void 0 : c.onDeselected) || s("onDeselected"), x = s("onDestroyed"); if (document.body.classList.remove("driver-active", "driver-fade", "driver-simple"), _e(), Te(), Ce(), me(), de(), X(), p && c) { const C = p.id === "driver-dummy-element"; m && m(C ? void 0 : p, c, { config: s(), state: l(), driver: _() }), x && x(C ? void 0 : p, c, { config: s(), state: l(), driver: _() }); } u && u.focus(); } const y = { isActive: () => l("isInitialized") || !1, refresh: M, drive: (a = 0) => { r(), v(a); }, setConfig: F, setSteps: (a) => { X(), F({ ...s(), steps: a }); }, getConfig: s, getState: l, getActiveIndex: () => l("activeIndex"), isFirstStep: () => l("activeIndex") === 0, isLastStep: () => { const a = s("steps") || [], p = l("activeIndex"); return p !== void 0 && p === a.length - 1; }, getActiveStep: () => l("activeStep"), getActiveElement: () => l("activeElement"), getPreviousElement: () => l("previousElement"), getPreviousStep: () => l("previousStep"), moveNext: i, movePrevious: d, moveTo: n, hasNextStep: () => { const a = s("steps") || [], p = l("activeIndex"); return p !== void 0 && !!a[p + 1]; }, hasPreviousStep: () => { const a = s("steps") || [], p = l("activeIndex"); return p !== void 0 && !!a[p - 1]; }, highlight: (a) => { r(), j({ ...a, popover: a.popover ? { showButtons: [], showProgress: !1, progressText: "", ...a.popover } : void 0 }); }, destroy: () => { g(!1); } }; return le(y), y; } export { Ae as driver };