@flows/js-components/dist/tour-components.js

Built-in components for Flows JS SDK

"use strict";var w=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var n in t)w(e,n,{get:t[n],enumerable:!0})},A=(e,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of M(t))!k.call(e,o)&&o!==n&&w(e,o,{get:()=>t[o],enumerable:!(l=P(t,o))||l.enumerable});return e};var $=e=>A(w({},"__esModule",{value:!0}),e);var Z={};H(Z,{Hint:()=>I,Modal:()=>F,Tooltip:()=>V});module.exports=$(Z);var B="#22262d",O="#fff",h="%cFlows%c",C=`color:${O};background:${B};padding:2px 4px;border-radius:4px`,_={error:(e,...t)=>{console.error(`${h} ${e}`,C,"",...t)},warn:(e,...t)=>{console.warn(`${h} ${e}`,C,"",...t)}};var m=require("@floating-ui/dom");var p=()=>{let e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.setAttribute("height","16"),e.setAttribute("width","16"),e.setAttribute("viewBox","0 0 16 16"),e.setAttribute("fill","currentColor");let t=document.createElementNS("http://www.w3.org/2000/svg","path");return e.appendChild(t),t.setAttribute("d","M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"),e};var D=8,S=4,g=e=>{let t=e.targetElement?document.querySelector(e.targetElement):null;if(!t)return e.targetElement||_.error("Cannot render Hint without target element"),{element:null,cleanup:()=>{}};let n=document.createElement("div"),l=document.createElement("button");n.appendChild(l),l.className="flows_hint_hotspot",l.setAttribute("aria-label","Open hint"),l.type="button";let o=null,c=()=>{if(o){o();return}let i=document.createElement("div");n.appendChild(i),i.className="flows_tooltip_tooltip flows_hint_tooltip",i.setAttribute("data-open","true");let r=document.createElement("p");i.appendChild(r),r.className="flows_text flows_text_title flows_tooltip_title",r.textContent=e.title;let u=document.createElement("p");if(i.appendChild(u),u.className="flows_text flows_text_body flows_tooltip_body",u.innerHTML=e.body,e.buttons.length){let b=document.createElement("div");i.appendChild(b),b.className="flows_tooltip_footer",e.buttons.forEach(v=>b.appendChild(v))}let a=null;e.onClose&&(a=document.createElement("button"),i.appendChild(a),a.className="flows_iconButton flows_tooltip_close",a.setAttribute("aria-label","Close"),a.appendChild(p()),a.addEventListener("click",e.onClose));let E=(0,m.autoUpdate)(t,i,()=>void G({el:i,reference:l,placement:e.placement}),{animationFrame:!0}),f=b=>{let v=b.target;if(!v.isConnected)return;!i.contains(v)&&!l.contains(v)&&(o==null||o())};window.addEventListener("click",f),o=()=>{e.onClose&&(a==null||a.removeEventListener("click",e.onClose)),window.removeEventListener("click",f),E(),i.remove(),o=null}};l.addEventListener("click",c);let s=(0,m.autoUpdate)(t,l,()=>void R({el:l,reference:t,placement:e.placement}),{animationFrame:!0});return{element:n,cleanup:()=>{o==null||o(),s(),l.removeEventListener("click",c)}}},R=({reference:e,el:t,placement:n,offsetX:l,offsetY:o})=>(0,m.computePosition)(e,t,{placement:n}).then(({x:c,y:s})=>{t.style.left=`${c+(l!=null?l:0)}px`,t.style.top=`${s+(o!=null?o:0)}px`}),G=({el:e,reference:t,placement:n})=>(0,m.computePosition)(t,e,{placement:n,middleware:[(0,m.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,m.shift)({crossAxis:!0,padding:D}),(0,m.offset)(S)]}).then(({x:l,y:o})=>{e.style.left=`${l}px`,e.style.top=`${o}px`});var y=()=>{let e=document.createElement("div");return e.setAttribute("aria-hidden","true"),e},I=e=>{let t=null;e.previous&&e.previousText&&(t=document.createElement("button"),t.className="flows_button flows_button_secondary",t.textContent=e.previousText,t.addEventListener("click",e.previous));let n=null;e.continueText&&(n=document.createElement("button"),n.className="flows_button flows_button_primary",n.textContent=e.continueText,n.addEventListener("click",e.continue));let l=n||t?[t!=null?t:y(),n!=null?n:y()]:[],o=g({title:e.title,body:e.body,targetElement:e.targetElement,offsetX:e.offsetX,offsetY:e.offsetY,placement:e.placement,onClose:e.showCloseButton?e.cancel:void 0,buttons:l});return{element:o.element,cleanup:()=>{n==null||n.removeEventListener("click",e.continue),e.previous&&(t==null||t.removeEventListener("click",e.previous)),o.cleanup()}}};var x=e=>{let t=document.createElement("div"),n=null;e.overlay&&(n=document.createElement("div"),t.appendChild(n),n.className=`flows_modal_overlay${e.close?" flows_modal_clickable":""}`,n.setAttribute("aria-hidden","true"),e.close&&n.addEventListener("click",e.close));let l=document.createElement("div");t.appendChild(l),l.className="flows_modal_wrapper";let o=document.createElement("div");l.appendChild(o),o.className="flows_modal_modal";let c=document.createElement("p");o.appendChild(c),c.className="flows_text flows_text_title",c.textContent=e.title;let s=document.createElement("p");if(o.appendChild(s),s.className="flows_text flows_text_body",s.innerHTML=e.body,e.buttons.length){let r=document.createElement("div");o.appendChild(r),r.className="flows_modal_footer",e.buttons.forEach(u=>r.appendChild(u))}let i=null;return e.close&&(i=document.createElement("button"),o.appendChild(i),i.className="flows_iconButton flows_modal_close",i.setAttribute("aria-label","Close"),i.addEventListener("click",e.close),i.appendChild(p())),{element:t,cleanup:()=>{e.close&&(i==null||i.removeEventListener("click",e.close),n==null||n.removeEventListener("click",e.close))}}};var F=e=>{let t=[],n=null;e.previous&&e.previousText&&(n=document.createElement("button"),t.push(n),n.className="flows_button flows_button_secondary",n.textContent=e.previousText,n.addEventListener("click",e.previous));let l=null;e.continueText&&(l=document.createElement("button"),t.push(l),l.className="flows_button flows_button_primary",l.textContent=e.continueText,l.addEventListener("click",e.continue));let o=x({title:e.title,body:e.body,overlay:!e.hideOverlay,buttons:t,close:e.showCloseButton?e.cancel:void 0});return{element:o.element,cleanup:()=>{o.cleanup(),e.previous&&(n==null||n.removeEventListener("click",e.previous)),l==null||l.removeEventListener("click",e.continue)}}};var d=require("@floating-ui/dom");var T=e=>{let t=e.targetElement?document.querySelector(e.targetElement):null;if(!t)return e.targetElement||_.error("Cannot render Tooltip without target element"),{element:null,cleanup:()=>{}};let n=document.createElement("div");n.className="flows_tooltip_root";let l=null;e.overlay&&(l=document.createElement("div"),n.appendChild(l),l.className="flows_tooltip_overlay",l.setAttribute("aria-hidden","true"));let o=document.createElement("div");n.appendChild(o),o.className="flows_tooltip_tooltip";let c=document.createElement("p");o.appendChild(c),c.className="flows_text flows_text_title flows_tooltip_title",c.textContent=e.title;let s=document.createElement("p");if(o.appendChild(s),s.className="flows_text flows_text_body flows_tooltip_body",s.innerHTML=e.body,e.buttons.length){let E=document.createElement("div");o.appendChild(E),E.className="flows_tooltip_footer",e.buttons.forEach(f=>E.appendChild(f))}let i=null;e.close&&(i=document.createElement("button"),o.appendChild(i),i.className="flows_iconButton flows_tooltip_close",i.setAttribute("aria-label","Close"),i.appendChild(p()),i.addEventListener("click",e.close));let r=document.createElement("div");o.appendChild(r),r.className="flows_tooltip_arrow flows_tooltip_arrow-bottom";let u=document.createElement("div");o.appendChild(u),u.className="flows_tooltip_arrow flows_tooltip_arrow-top";let a=(0,d.autoUpdate)(t,o,()=>void q({reference:t,tooltip:o,arrowEls:[r,u],overlay:l,placement:e.placement}),{animationFrame:!0});return{element:n,cleanup:()=>{a(),e.close&&(i==null||i.removeEventListener("click",e.close))}}},U=4,L=6,W=U+L,Y=8,X=8,q=({reference:e,tooltip:t,placement:n,arrowEls:l,overlay:o})=>{if(o){let c=e.getBoundingClientRect();o.style.top=`${c.top}px`,o.style.left=`${c.left}px`,o.style.width=`${c.width}px`,o.style.height=`${c.height}px`}return(0,d.computePosition)(e,t,{placement:n,middleware:[(0,d.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,d.shift)({crossAxis:!0,padding:Y}),(0,d.arrow)({element:l[0],padding:X}),(0,d.offset)(W)]}).then(({x:c,y:s,middlewareData:i,placement:r})=>{if(t.style.left=`${c}px`,t.style.top=`${s}px`,i.arrow){let u=r.includes("top")?"bottom":r.includes("bottom")?"top":r.includes("left")?"right":"left",a=i.arrow.x,E=i.arrow.y;l.forEach(f=>{f.style.left=a!=null?`${a}px`:"",f.style.top=E!=null?`${E}px`:"",f.style.right="",f.style.bottom="",f.style[u]=`${-L}px`})}}).catch(c=>{_.error("Error computing position",c)})};var N=()=>{let e=document.createElement("div");return e.setAttribute("aria-hidden","true"),e},V=e=>{let t=null;e.previous&&e.previousText&&(t=document.createElement("button"),t.className="flows_button flows_button_secondary",t.textContent=e.previousText,t.addEventListener("click",e.previous));let n=null;e.continueText&&(n=document.createElement("button"),n.className="flows_button flows_button_primary",n.textContent=e.continueText,n.addEventListener("click",e.continue));let l=n||t?[t!=null?t:N(),n!=null?n:N()]:[],o=T({title:e.title,body:e.body,targetElement:e.targetElement,placement:e.placement,overlay:!e.hideOverlay,close:e.showCloseButton?e.cancel:void 0,buttons:l});return{element:o.element,cleanup:()=>{n==null||n.removeEventListener("click",e.continue),e.previous&&(t==null||t.removeEventListener("click",e.previous)),o.cleanup()}}};