userflow.js-self-hosted 0.1.1009415 → 0.1.1009459
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BannerApp.js +1 -1
- package/ChecklistApp.js +1 -1
- package/ChecklistUI.js +1 -1
- package/ElementSelectionApp.js +1 -1
- package/FlowApp.js +3 -3
- package/FlowChrome.js +2 -2
- package/LauncherApp.js +1 -1
- package/ResourceCenterApp.js +4 -4
- package/ResourceCenterAssistantChat.js +2 -2
- package/Trigger.js +1 -1
- package/bubble-frame.css +17 -0
- package/flow-host.css +28 -0
- package/flow-host.styl.js +1 -1
- package/hash.txt +1 -1
- package/implicit-tracking.js +2 -2
- package/package.json +1 -1
- package/roots.js +1 -1
- package/stylesheets.js +1 -1
- package/ui.js +2 -2
- package/use-selector-element-monitoring.js +10 -1
- package/userflow.js +4 -4
- package/vendor.bignumber.js.js +2 -0
- package/vendor.core-js.js +1 -1
- package/vendor.date-fns.js +1 -1
- package/BubbleToolbar.js +0 -2
- package/bubble-frame.styl.js +0 -11
package/BannerApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r,R as
|
|
1
|
+
import{r,R as a}from"./vendor.react.js";import{l as s,E as A}from"./userflow.js";import{u as D,i as v}from"./client-context.js";import{o as R}from"./vendor.obj-str.js";import{u as x,a as C,D as O}from"./stylesheets.js";import{a as $}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{u as P,S as W,b as Y,R as z,B as U}from"./use-selector-element-monitoring.js";import{g as H}from"./flow-condition-types.js";import{f as K,w as Z}from"./flow-host.styl.js";import{r as q}from"./vendor.react-dom.js";import{F as G}from"./use-window-resize.js";import{e as i}from"./roots.js";import{u as J}from"./use-element-rect.js";import"./vendor.core-js.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./vendor.date-fns.js";import"./vendor.scheduler.js";(function(){try{var n=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},d=new Error().stack;d&&(n._sentryDebugIds=n._sentryDebugIds||{},n._sentryDebugIds[d]="36e76bb1-f56d-450c-82f4-3ee68eb0e8e7",n._sentryDebugIdIdentifier="sentry-dbid-36e76bb1-f56d-450c-82f4-3ee68eb0e8e7")}catch{}})();const Se=({session:n})=>{const d=D(),{version:c}=n,e=c.banner,p=x(c.theme),g=n.locale?n.locale.standardLocaleId:n.version.theme.languageId;r.useEffect(()=>{v.changeLanguage(g)},[g]);const t=r.useMemo(()=>document.createElement("div"),[]),[k,w]=r.useState(!1),{loaded:T}=C(window,K,p),[I,h]=r.useState(!1),E=T&&I,[M,B]=r.useState(0),u=r.useCallback(()=>{h(!1),B(o=>o+1)},[]),f=![s.BODY_FIRST,s.BODY_LAST].includes(e.embedMode),[l,S]=r.useState(null),F=r.useCallback(({targetEl:o})=>{S(o)},[]),N=r.useCallback(()=>{f&&console.warn(`Userflow.js: Could not find embed element for banner "${n.flow.name||n.flow.id}"`),S(null)},[f,n.flow.name,n.flow.id]);P({selector:e.embedSelector,targetMoved:F,targetLost:N});const b=r.useCallback(()=>{t.parentElement?.removeChild(t),w(!1),u()},[t,u]);r.useLayoutEffect(()=>{let o=null,m=null;if(f){if(!l){b();return}(e.overlay||e.sticky)&&(e.embedMode===s.ELEMENT_BEFORE||e.embedMode===s.ELEMENT_AFTER?m=l.parentElement:m=l,window.getComputedStyle(m).position==="static"&&(o=m.style.position,m.style.position="relative"))}switch(e.embedMode){case s.BODY_FIRST:document.body.insertAdjacentElement("afterbegin",t);break;case s.BODY_LAST:document.body.insertAdjacentElement("beforeend",t);break;case s.ELEMENT_FIRST:l.insertAdjacentElement("afterbegin",t);break;case s.ELEMENT_LAST:l.insertAdjacentElement("beforeend",t);break;case s.ELEMENT_BEFORE:l.insertAdjacentElement("beforebegin",t);break;case s.ELEMENT_AFTER:l.insertAdjacentElement("afterend",t);break}return w(!0),u(),()=>{m&&o!=null&&(m.style.position=o)}},[b,t,f,l,e.overlay,e.sticky,e.embedMode,u]),r.useLayoutEffect(()=>b,[b]);const L=R({"userflowjs-banner":!0,[`userflowjs-banner--animate-${String(e.animate)}`]:!0,[`userflowjs-banner--embed-mode-${e.embedMode}`]:!0,[`userflowjs-banner--sticky-${String(e.sticky)}`]:!0,[`userflowjs-banner--overlay-${e.overlay}`]:!0});r.useLayoutEffect(()=>{t.className=L||""},[t,L]);const y=e.zIndex||Z(0);r.useLayoutEffect(()=>{t.style.zIndex=y==null?"":String(y),t.style.position=E?"":"absolute",t.style.visibility=E?"":"hidden"},[t,y,E]);const{height:j,setEl:_}=J();return r.useLayoutEffect(()=>{t.style.setProperty("--userflowjs-banner-height",i(j+(e.marginTop||0)+(e.marginBottom||0))||"")},[t,j,e.marginTop,e.marginBottom]),k?q.createPortal(a.createElement(W.Provider,{value:n},a.createElement(G,{key:M,className:"userflowjs-banner-frame",style:{maxWidth:i(e.maxWidth),marginTop:i(e.marginTop),marginRight:i(e.marginRight),marginBottom:i(e.marginBottom),marginLeft:i(e.marginLeft),borderRadius:i(e.borderRadius)},stylesheet:Y,theme:p,onStylesheetsLoad:h,title:"Banner"},a.createElement("div",{ref:_,className:R({"userflowjs-banner-root":!0,[`userflowjs-banner-root--content-layout-${e.contentLayout}`]:!0,"userflowjs-theme-root":!0}),dir:v.dir()},a.createElement("div",{className:"userflowjs-banner-start-spacer"}),a.createElement("div",{className:"userflowjs-banner-inner",style:{maxWidth:i(e.maxContentWidth)}},a.createElement("div",{className:"userflowjs-banner-content"},a.createElement(z,{doc:e.content,lookupAttribute:H(n.data)})),e.buttons.length>0&&a.createElement("div",{className:"userflowjs-banner-buttons"},e.buttons.map(o=>a.createElement(U,{key:o.id,button:o})))),c.closeDisabled?a.createElement("div",{className:"userflowjs-banner-start-spacer"}):a.createElement("button",{"data-testid":"userflow-banner-dismiss",className:"userflowjs-banner-close",onClick:()=>d.endFlow(n,{endReason:A.USER_CLOSED})},a.createElement(O,{icon:$}))))),t):null};export{Se as BannerApp,Se as default};
|
|
2
2
|
//# sourceMappingURL=BannerApp.js.map
|
package/ChecklistApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as s,R as c}from"./vendor.react.js";import{r as
|
|
1
|
+
import{r as s,R as c}from"./vendor.react.js";import{r as b,q as R,f as F,g as B}from"./userflow.js";import{F as _,B as N}from"./FlowChrome.js";import{i as D,u as C}from"./client-context.js";import{f as P,w as j,C as U,S as A}from"./flow-host.styl.js";import{a as H,D as O,u as I}from"./stylesheets.js";import{F as Z}from"./use-window-resize.js";import{o as z}from"./vendor.obj-str.js";import{z as W}from"./roots.js";import{l as X}from"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.core-js.js";import{u as M}from"./vendor.react-i18next.js";import{C as Y}from"./ChecklistUI.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./use-selector-element-monitoring.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./logomark.js";import"./vendor.i18next.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./vendor.babel.runtime.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},e=new Error().stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="aef3cee2-94d3-4e74-991b-0732d3cac947",t._sentryDebugIdIdentifier="sentry-dbid-aef3cee2-94d3-4e74-991b-0732d3cac947")}catch{}})();const G=new URL("checklist-launcher-frame.css",import.meta.url).href,K=({position:t,theme:e,onClick:l,onVisibleChange:r,buttonRef:a,text:u,uncompletedCount:n})=>{const d=t||"absolute",{i18n:o}=M(),h=o.dir(),{loaded:i}=H(window,P,e),[m,k]=s.useState(!1),f=i&&m;s.useEffect(()=>{r&&r(f)},[r,f]);const w=s.useRef(null),L=s.useRef(0),[v,S]=s.useState(null);s.useLayoutEffect(()=>{const E=w.current;if(!E||!v)return;const y=v.clientWidth;y!==L.current&&(L.current=y,E.style.setProperty("width",W(y)+"px","important"),E.style.setProperty("height",e.checklistLauncherHeight+"px","important"))});const p=e.checklistLauncherPlacement,x=p===b.TOP_LEFT||p===b.TOP_RIGHT,g=p===b.TOP_LEFT||p===b.BOTTOM_LEFT,T={zIndex:d==="fixed"?e.checklistZIndex!=null?e.checklistZIndex:j(U):1,top:x?e.checklistLauncherY+"px":void 0,bottom:x?void 0:e.checklistLauncherY+"px",[h==="ltr"?"left":"right"]:g?e.checklistLauncherX+"px":void 0,[h==="ltr"?"right":"left"]:g?void 0:e.checklistLauncherX+"px",height:e.checklistLauncherHeight+"px",borderRadius:e.checklistLauncherBorderRadius+"px",position:f?void 0:"absolute",visibility:f?void 0:"hidden",animation:f?void 0:"none"};return c.createElement(Z,{elRef:w,testId:"checklist-launcher-app",className:z({"userflowjs-checklist-launcher":!0,[`userflowjs-checklist-launcher--position-${d}`]:!0}),style:T,stylesheet:G,theme:e,onStylesheetsLoad:k,title:"Checklist launcher"},c.createElement("button",{ref:a,className:"userflowjs-checklist-launcher-frame-root",onClick:l},c.createElement("div",{ref:S,className:"userflowjs-checklist-launcher-content"},c.createElement("div",{className:"userflowjs-checklist-launcher-text"},u||"Get Started"),c.createElement("div",{"data-testid":"checklist-launcher-uncompleted-count",className:"userflowjs-checklist-launcher-uncompleted-count"},n===0?c.createElement(O,{icon:X}):n,c.createElement("div",{className:"userflowjs-a11y-only"},"uncompleted tasks")))))},ve=({session:t,checklistExpanded:e})=>{const{version:l}=t,r=l.checklist,a=t.locale?t.locale.standardLocaleId:t.version.theme.languageId;s.useEffect(()=>{D.changeLanguage(a)},[a]);const[u,n]=s.useState(!1);return e?c.createElement(q,{session:t,initialAutoFocus:u,setInitialAutoFocus:n}):r.launcherEnabled?c.createElement(V,{session:t,initialAutoFocus:u,setInitialAutoFocus:n}):null},q=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const r=C(),[a,u]=s.useState(null),{version:n}=t,d=n.checklist,o=I(n.theme),h=s.useMemo(()=>({...o,avatarType:R.NONE,bubblePlacement:o.checklistPlacement,bubbleX:o.checklistX,bubbleY:o.checklistY,bubbleWidth:o.checklistWidth}),[o]);return s.useEffect(()=>{const i=a?.ownerDocument.defaultView;if(!i)return;const m=k=>{k.key==="Escape"&&(l(!0),r.hideChecklist())};return i.addEventListener("keydown",m),()=>i.removeEventListener("keydown",m)},[a,l,r]),c.createElement(A,null,c.createElement(_,{company:t.flow.company,theme:h,position:"fixed",stepAppearance:F.BUBBLE,zIndex:o.checklistZIndex,autoHide3pEnabled:!0,backgroundImageUrl:d.backgroundAsset&&d.backgroundAsset.assetUrl,bubbleFrameRootRef:u},c.createElement("div",{role:"dialog","aria-label":"Checklist"},c.createElement(Y,{session:t,initialAutoFocus:e}),c.createElement(N,{draftMode:t.draftMode,minimize:i=>{l(i.detail===0),r.hideChecklist()}}))))},V=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const r=C(),[a,u]=s.useState(!1),[n,d]=s.useState(null),{version:o}=t,h=o.checklist,i=I(o.theme);return s.useEffect(()=>{!a||!n||!e||n.focus()},[r,n,a,e]),c.createElement(K,{position:"fixed",theme:i,onClick:m=>{l(m.detail===0),r.showChecklist()},onVisibleChange:u,buttonRef:d,text:h.launcherText,uncompletedCount:B(t)})};export{ve as ChecklistApp,ve as default};
|
|
2
2
|
//# sourceMappingURL=ChecklistApp.js.map
|
package/ChecklistUI.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as e,r as a}from"./vendor.react.js";import{E as R,o as I}from"./userflow.js";import{u as v}from"./client-context.js";import"./vendor.core-js.js";import{u as D}from"./vendor.react-i18next.js";import{o as F}from"./vendor.obj-str.js";import{D as C}from"./stylesheets.js";import{a as P,b as U}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{h as L,a as y,
|
|
1
|
+
import{R as e,r as a}from"./vendor.react.js";import{E as R,o as I}from"./userflow.js";import{u as v}from"./client-context.js";import"./vendor.core-js.js";import{u as D}from"./vendor.react-i18next.js";import{o as F}from"./vendor.obj-str.js";import{D as C}from"./stylesheets.js";import{a as P,b as U}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{h as L,a as y,f as O,R as B}from"./use-selector-element-monitoring.js";import{g as j}from"./flow-condition-types.js";import{b as M,e as H}from"./vendor.fortawesome.pro-regular-svg-icons.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},o=new Error().stack;o&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[o]="1e6e2f0e-38f0-4d4b-97a8-a03a7e22127c",t._sentryDebugIdIdentifier="sentry-dbid-1e6e2f0e-38f0-4d4b-97a8-a03a7e22127c")}catch{}})();const $=e.forwardRef(({elProps:t,onClick:o,onCheckmarkClick:n,completed:s,disabled:i,name:c,text:b,active:d,htmlAttributes:r,children:u},w)=>{const m=a.useRef(s);return e.createElement("button",{...t,ref:w,"data-testid":"bubble-task",tabIndex:o?0:-1,className:F({"userflowjs-bubble-task":!0,"userflowjs-bubble-task--completed":!!s,"userflowjs-bubble-task--just-completed":!m.current&&!!s,"userflowjs-bubble-task--disabled":!s&&!!i,"userflowjs-bubble-task--clickable":!!o,"userflowjs-bubble-task--active":!!d}),onClick:o,...r},e.createElement("div",{className:"userflowjs-bubble-task__checkmark",onClick:n},s&&e.createElement(C,{icon:P})),e.createElement("div",{className:"userflowjs-bubble-task__content"},e.createElement("div",{className:"userflowjs-bubble-task__name"},c),e.createElement("div",{className:"userflowjs-bubble-task__text"},b)),e.createElement("div",{className:"userflowjs-bubble-task__arrow"},!s&&e.createElement("div",{className:"userflowjs-rtl-mirrored"},e.createElement(C,{icon:U}))),u)}),z=({task:t,previousTasksCompleted:o})=>{const n=v(),{session:s}=g(),i=s.version.checklist,[c,b]=a.useState(()=>n.taskIsUnacked(t.cvid));a.useEffect(()=>{if(!c)return;const m=window.setTimeout(()=>b(!1),500);return()=>window.clearTimeout(m)},[c]);const d=s.taskCompletions.some(({taskCvid:m})=>m===t.cvid),r=!c&&d;a.useEffect(()=>{r&&n.ackCompletedTask(t.cvid)},[n,r,t.cvid]);const u=i.completeInOrder&&!o,w=u||t.actions.length===0&&r?void 0:()=>{n.send({kind:"ClickChecklistTask",sessionId:s.id,taskCvid:t.cvid},{batch:!0}),t.actions.length>0&&(r||!t.completesOnClick)&&n.hideChecklist(),L(n,s,t.actions)};return e.createElement($,{onClick:w,name:e.createElement(y,{doc:t.name,lookupAttribute:j(s.data)}),text:e.createElement(y,{doc:t.text,lookupAttribute:j(s.data)}),completed:r,disabled:u})},G=({completedCount:t,taskCount:o})=>{const n=o===0?0:Math.min(100,Math.round(t/o*100));return e.createElement("div",{className:"userflowjs-bubble-checklist-progress"},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-bg"},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},n,"%")),e.createElement("div",{className:"userflowjs-bubble-checklist-progress-fill",style:{width:`${n}%`}},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},n,"%")))},J=()=>{const{t}=D(),o=v(),n=g(),{session:s}=n,{version:i}=s,c=i.checklist,{dispatch:b}=q(),d=s.taskCompletions.length,r=c.tasks.length,u=d===r;let w=!0,m=c.tasks,h=[],p=n.currentSectionName,S=!1;if(c.sectionsEnabled){let f=null;const k=Array.from(c.tasks).sort((l,E)=>l.sectionName.localeCompare(E.sectionName));for(const l of k)l.sectionName!==f&&(h.push(l.sectionName),f=l.sectionName);(!p||!h.includes(p))&&(p=h[0]),m=k.filter(l=>l.sectionName===p),S=m.some(l=>{const E=s.taskCompletions.some(({taskCvid:A})=>A===l.cvid);return l.blocksNextSection&&!E})}const N=p==null?-1:h.indexOf(p),x=f=>{const k=N+f;if(k>=0&&k<=h.length-1){const l=h[k];I.setItem("currentChecklistSectionName:"+s.id,l),b({kind:"setCurrentSection",sectionName:l})}};return e.createElement(e.Fragment,null,!O(c.content)&&e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement(B,{doc:c.content,lookupAttribute:j(s.data)})),e.createElement(G,{completedCount:d,taskCount:r}),c.sectionsEnabled&&e.createElement("div",{className:"userflowjs-bubble-section-name"},p||"First section"),e.createElement("div",{className:"userflowjs-bubble-tasks"},m.map(f=>{const k=w;return s.taskCompletions.some(({taskCvid:E})=>E===f.cvid)||(w=!1),e.createElement(z,{key:f.id,task:f,previousTasksCompleted:k})})),c.sectionsEnabled&&e.createElement("div",{className:"userflowjs-bubble-section-buttons"},e.createElement("button",{className:"userflowjs-bubble-section-button",onClick:()=>x(-1),disabled:N<=0},e.createElement(C,{icon:M}),e.createElement("span",null,t("checklist.previousSection"))),e.createElement("button",{className:"userflowjs-bubble-section-button",onClick:()=>x(1),disabled:N>=h.length-1||S},e.createElement("span",null,t("checklist.nextSection")),e.createElement(C,{icon:H}))),!i.closeDisabled&&e.createElement("div",{className:"userflowjs-bubble-dismiss-row"},e.createElement("button",{className:F({"userflowjs-bubble-dismiss-button":!0,"userflowjs-bubble-dismiss-button--completed":u}),onClick:()=>u?o.endFlow(s,{endReason:R.USER_CLOSED}):b({kind:"showClose"})},t("checklistDismiss.button"))))},K=()=>{const{t}=D(),o=v(),{dispatch:n}=q(),{session:s}=g();return e.createElement("div",{role:"alert"},e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("p",null,e.createElement("b",null,t("checklistDismiss.title")))),e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--primary",onClick:()=>o.endFlow(s,{endReason:R.USER_CLOSED})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},t("checklistDismiss.yes"))),e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--default",onClick:()=>n({kind:"showFlow"})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},t("checklistDismiss.cancel")))))};function Q(t){const o=t?.querySelector(".userflowjs-bubble-task--clickable:not(.userflowjs-bubble-task--completed)")||t?.querySelector(".userflowjs-bubble-task--clickable")||t?.querySelector('button:not([tabIndex="-1"])');o&&typeof o.focus=="function"&&o.focus()}const re=({session:t,initialAutoFocus:o})=>{const n=v(),s=a.useRef(null),[i,c]=a.useReducer(W,void 0,()=>({...V,session:t,currentSectionName:I.getItem("currentChecklistSectionName:"+t.id),autoFocusRequested:!!o})),{session:b,contentType:d}=i;a.useEffect(()=>{b!==t&&c({kind:"updateSession",session:t})},[b,t]);const r=a.useMemo(()=>({dispatch:c}),[c]);return a.useEffect(()=>{if(!i.autoFocusRequested)return;const u=s.current;u&&Q(u),c({kind:"autoFocused"})},[n,i.autoFocusRequested]),e.createElement(T.Provider,{value:r},e.createElement(_.Provider,{value:i},e.createElement("div",{ref:s},d==="close"?e.createElement(K,null):e.createElement(J,null))))},V={contentType:"flow"};function W(t,o){switch(o.kind){case"updateSession":return{...t,session:o.session};case"showFlow":return{...t,contentType:"flow",autoFocusRequested:!0};case"showClose":return{...t,contentType:"close",autoFocusRequested:!0};case"setCurrentSection":return{...t,currentSectionName:o.sectionName};case"autoFocused":return{...t,autoFocusRequested:!1}}}const T=a.createContext(null),_=a.createContext(null);function q(){return a.useContext(T)}function g(){return a.useContext(_)}export{re as C,Q as f};
|
|
2
2
|
//# sourceMappingURL=ChecklistUI.js.map
|
package/ElementSelectionApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as y,R as o}from"./vendor.react.js";import{i as _}from"./vendor.is-hotkey.js";import{o as de}from"./vendor.obj-str.js";import{r as W,c as ne,d as oe,o as fe,h as $,j as ae,k as pe,l as ge,m as re,a as we,p as C}from"./roots.js";import{
|
|
1
|
+
import{r as y,R as o}from"./vendor.react.js";import{i as _}from"./vendor.is-hotkey.js";import{o as de}from"./vendor.obj-str.js";import{r as W,c as ne,d as oe,o as fe,h as $,j as ae,k as pe,l as ge,m as re,a as we,p as C}from"./roots.js";import{m as U}from"./userflow.js";import{u as he}from"./client-context.js";import{u as ve}from"./use-window-resize.js";import{B as be}from"./BuilderBar.js";import"./vendor.core-js.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./stylesheets.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";import"./logomark.js";import"./vendor.fortawesome.pro-light-svg-icons.js";(function(){try{var p=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},n=new Error().stack;n&&(p._sentryDebugIds=p._sentryDebugIds||{},p._sentryDebugIds[n]="0538e7c4-fda2-490f-a3f6-810d8ca35434",p._sentryDebugIdIdentifier="sentry-dbid-0538e7c4-fda2-490f-a3f6-810d8ca35434")}catch{}})();const ye=_("alt+s"),Ee=_("escape"),Re=_("u"),ze=({state:p})=>{const{mode:n,elementType:m}=p,g=he(),S=y.useRef(null),[A,ie]=y.useState(!1),B=y.useRef(null),[V,le]=y.useState(null),[I,ce]=y.useState(()=>se()),M=y.useCallback(async(s,c)=>{if(s&&c){const l=S.current?.getFrame();l&&B.current&&(B.current.classList.add("userflowjs-element-selection-box--no-transition"),l.style.display="none",l.offsetWidth),re(),g.setSessionStorageState(d=>({...d,elementSelection:{...d.elementSelection,mode:"done"}}));const w=W(s),h=0,r=0,R=Math.round(ne()),T=Math.round(oe()),a=await g.getTargetEnv().captureScreenshot(h,r,R,T),E=d=>Math.round(d/$(1));c={...c,screenshotDataUrl:a,targetX1:E(w.left),targetY1:E(w.top-r),targetX2:E(w.right),targetY2:E(w.bottom-r),screenshotWidth:R,screenshotHeight:T}}g.setSessionStorageState(l=>({...l,activeApp:null,elementSelection:null})),g.getTargetEnv().postBuilderMessage({kind:"userflow:selectElementResult",selectorData:c})},[g]),L=y.useCallback(s=>g.setSessionStorageState(c=>({...c,elementSelection:{...c.elementSelection,mode:s}})),[g]);return y.useEffect(()=>{if(!A||!S.current)return;const s=S.current.getFrame(),c=S.current.getRootEl();let l=c&&c.ownerDocument&&c.ownerDocument.defaultView;l===window&&(l=null);let w=null,h=null,r=null,R=null;const T=document.getElementById("userflow-ui"),a={capture:!0},E=()=>{window.cancelAnimationFrame(d);let e=null,t=null,v=null;if(h&&!T.contains(h)){let f=null,u=h;for(;u;){{const x=u.getBoundingClientRect();if(x.width===0&&x.height===0){u=O(u);continue}}if(f=we(u,{elementType:m}),f)break;u=O(u)}f?(t=f.el,e=f.selector):m===U.INPUT?v="No text input found here":v="Sorry, we can't select that element (yet!)"}r=t,w=e,le(v),q()};let d;const Y=()=>{window.cancelAnimationFrame(d),d=window.requestAnimationFrame(E)},q=()=>{window.cancelAnimationFrame(N);const e=B.current;if(!e)return;re();const t=$(ne()),v=$(oe());let f=v/2,u=t/2,x=v/2,H=t/2;const b=2;let J=b,Q=b,ee=b,te=b;if(r){const i=W(r),F=window.getComputedStyle(r);f=Math.max(0,i.top),u=Math.max(0,t-i.right),x=Math.max(0,v-i.bottom),H=Math.max(0,i.left),J=Math.max(b,C(F.borderTopLeftRadius)),Q=Math.max(b,C(F.borderTopRightRadius)),ee=Math.max(b,C(F.borderBottomLeftRadius)),te=Math.max(b,C(F.borderBottomRightRadius)),R=r}else if(R){const i=W(R);f=Math.max(0,i.top+i.height/2),u=Math.max(0,t-i.right+i.width/2),x=Math.max(0,v-i.bottom+i.height/2),H=Math.max(0,i.left+i.width/2)}e.style.top=`${f}px`,e.style.right=`${u}px`,e.style.bottom=`${x}px`,e.style.left=`${H}px`,e.style.borderTopLeftRadius=`${J}px`,e.style.borderTopRightRadius=`${Q}px`,e.style.borderBottomLeftRadius=`${ee}px`,e.style.borderBottomRightRadius=`${te}px`,r?document.body.classList.remove("userflowjs-body-with-element-selection--none"):document.body.classList.add("userflowjs-body-with-element-selection--none")};let N;const ue=()=>{window.cancelAnimationFrame(N),N=window.requestAnimationFrame(q)},z=()=>{ue()},k=e=>{if(ye(e)){e.preventDefault(),n==="select"?L("navigate"):n==="navigate"&&L("select");return}if(Ee(e)&&n==="select"){e.preventDefault(),M(null,null);return}if(Re(e)&&r){const t=O(r);if(t){e.preventDefault(),h=t,E();return}}},j=e=>{const t=e.composedPath()[0];!t||t===r||t.tagName==="BODY"||t.tagName==="HTML"||(h=t,Y())},D=()=>{h=null,Y()};s&&s.addEventListener("mouseenter",D);const P=e=>{e.preventDefault(),e.stopPropagation()},X=e=>{P(e)},Z=e=>{P(e)},G=e=>{if(P(e),I){const t=e.target;if(!r||!r.contains(t)){j(e);return}}w&&(M(r,w),K())};l&&l.addEventListener("keydown",k),n==="select"&&(document.body.addEventListener("mouseleave",D),document.body.classList.add("userflowjs-body-with-element-selection"));const me=fe(e=>{const t=e.ownerDocument.defaultView;t&&(t.addEventListener("keydown",k,a),n==="select"&&(t.addEventListener("scroll",z,a),e.addEventListener("mousemove",j,a),e.addEventListener("mousedown",X,a),e.addEventListener("focus",Z,a),e.addEventListener("click",G,a)))},e=>{const t=e.ownerDocument.defaultView;t&&(t.removeEventListener("keydown",k,a),n==="select"&&(t.removeEventListener("scroll",z,a),ae(e)||e.removeEventListener("mousemove",j,a),e.removeEventListener("mousedown",X,a),e.removeEventListener("focus",Z,a),e.removeEventListener("click",G,a)))}),K=()=>{window.cancelAnimationFrame(d),window.cancelAnimationFrame(N),document.body.removeEventListener("mouseleave",D),l&&l.removeEventListener("keydown",k),s&&s.removeEventListener("mouseenter",D),document.body.classList.remove("userflowjs-body-with-element-selection"),document.body.classList.remove("userflowjs-body-with-element-selection--none"),me()};return K},[I,g,n,A,m,M,L]),ve(()=>ce(se())),o.createElement(o.Fragment,null,o.createElement(be,{ref:S,onReadyChange:ie,buttons:o.createElement(o.Fragment,null,n==="navigate"?o.createElement("button",{key:"select",className:"btn btn--default",onMouseDown:s=>{s.preventDefault(),s.stopPropagation(),L("select")}},o.createElement("span",{className:"hidden-lg-up"},"Select here"),o.createElement("span",{className:"hidden-md-down"},"Select element here (Alt + S)")):n==="select"?o.createElement("button",{key:"navigate",className:"btn btn--default",onMouseDown:s=>{s.preventDefault(),s.stopPropagation(),L("navigate")}},o.createElement("span",{className:"hidden-lg-up"},"Navigate"),o.createElement("span",{className:"hidden-md-down"},"Navigate to another page (Alt + S)")):null,(n==="select"||n==="navigate")&&o.createElement("button",{className:"btn btn--secondary-on-dark",onClick:()=>M(null,null)},"Cancel"))},n==="navigate"?o.createElement("div",{className:"status"},"Navigate to the page the element appears on"):V?o.createElement("div",{className:"error"},V):o.createElement("div",{className:"status"},I?o.createElement(o.Fragment,null,"Tap"," ",m===U.INPUT?"a text input":"an element"," ","to focus. Tap again to select."):o.createElement(o.Fragment,null,"Click"," ",m===U.INPUT?"a text input":"an element"," ","to select it"))),A&&(n==="select"||n==="done")&&o.createElement("div",{className:de({"userflowjs-element-selection-box":!0}),ref:B}))};function O(p){const n=p.parentNode;if(!n)return null;if(ae(n))return n.host;if(!pe(n))return null;if(n.tagName==="BODY"){const m=ge(n);return m||null}return n}function se(){return window.navigator.userAgent.includes("Mobile")}export{ze as ElementSelectionApp,ze as default};
|
|
2
2
|
//# sourceMappingURL=ElementSelectionApp.js.map
|
package/FlowApp.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{R as o,r as f}from"./vendor.react.js";import{E as D,
|
|
1
|
+
import{R as o,r as f}from"./vendor.react.js";import{E as D,f as N,V as L,n as ce,F as ue,T as O,o as B,p as de,q as pe,M as fe,U as Y}from"./userflow.js";import"./vendor.core-js.js";import{u as x}from"./vendor.react-i18next.js";import{B as G,F as me}from"./FlowChrome.js";import{m as be,d as Q,R as Ee,i as ge,g as we,c as he,u as Te,r as ve,e as V,h as Se,S as ye}from"./use-selector-element-monitoring.js";import{g as X,i as K}from"./flow-condition-types.js";import{u as R,i as ke}from"./client-context.js";import{z as De,d as Ne,r as Ie}from"./roots.js";import{a as Z,S as Re}from"./flow-host.styl.js";import{f as Me}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as Ae,u as Fe}from"./stylesheets.js";import{T as Be}from"./Trigger.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.babel.runtime.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./use-window-resize.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./logomark.js";import"./vendor.obj-str.js";import"./vendor.date-fns.js";import"./vendor.i18next.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},s=new Error().stack;s&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[s]="4b75ba20-97b6-4cf0-8f07-3a95508991c8",e._sentryDebugIdIdentifier="sentry-dbid-4b75ba20-97b6-4cf0-8f07-3a95508991c8")}catch{}})();const Ce=()=>{const{t:e}=x(),s=R(),{dispatch:t,restart:n}=A(),{session:l,step:d}=k(),a="userflowjs-bubble-button userflowjs-bubble-button--default userflowjs-bubble-menu__item";return o.createElement("div",{role:"dialog","aria-modal":M(d)?"true":void 0,"aria-label":"Guide menu"},o.createElement("div",{className:"userflowjs-bubble-menu__title"},e("menu.title")),o.createElement("button",{className:a,onClick:()=>s.endFlow(l,{endReason:D.USER_CLOSED})},e("menu.close")),l.version.restartEnabled&&o.createElement("button",{className:a,onClick:n},e("menu.restart")),o.createElement("button",{className:a,onClick:()=>t({kind:"showFlow"})},e("menu.back")))},W=({progress:e,type:s,position:t,totalSteps:n})=>{const{t:l}=x(),d=parseFloat(e||"0"),a={width:`${d*100}%`},c=s==="DEFAULT"?"TOP":t,u=`userflowjs-bubble-progress-${s||"DEFAULT"}`,m=c==="BOTTOM"?" userflowjs-bubble-progress-bottom":"",i=["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED","NARROW"].includes(s)?`userflowjs-bubble-progress-CHAINED ${s==="CHAINED_SQUARED"?"userflowjs-bubble-progress-CHAINED_SQUARED":s==="CHAINED_ROUNDED"?"userflowjs-bubble-progress-CHAINED_ROUNDED":s==="DOTTED"?"userflowjs-bubble-progress-DOTTED":"userflowjs-bubble-progress-NARROW"}${m}`:`${u}${m}`,r=n||0,b=Math.min(r,Math.max(1,Math.floor(d*r)));return o.createElement("div",null,["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED"].includes(s)&&o.createElement("div",{className:i},Array.from({length:3}).map((E,g)=>o.createElement("div",{key:g,className:`rounded ${g<Math.floor(d*3)?"completed":""}`}))),s==="NARROW"&&o.createElement("div",{className:i},o.createElement("div",{className:"linear-progress-bar"},o.createElement("div",{className:"linear-progress-fill",style:a}))),s==="NUMBERED"&&o.createElement("div",{className:i},o.createElement("span",{className:"numbered-progress"},l("of",{replace:{range:r,selected:b}}))),!["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED","NARROW","NUMBERED"].includes(s)&&o.createElement("div",{className:`${i} ${c==="BOTTOM"?"bottom":""}`},o.createElement("div",{className:"userflowjs-bubble-progress__fill",style:a})))};var J=(e=>(e.BOTTOM="BOTTOM",e.TOP="TOP",e))(J||{});const Le=({theme:e})=>{const s=R(),{session:t,step:n,muted:l,shouldLabelDialog:d}=k(),{version:a}=t,{dispatch:c}=A(),u=a.steps[0],m=u&&u.id===n.id,i=m&&n.progress==="1",r=f.useMemo(()=>n.content&&be(Q(n.content),{buttons:n.buttons,questions:n.questions}),[n.content,n.buttons,n.questions]),b=a.steps.filter(v=>v.appearance!==N.HIDDEN),E=b.findIndex(v=>v.id===n.id),g=b.length,h=g>0?((E+1)/g).toString():"0";return o.createElement("div",{key:n.id,role:"alertdialog","aria-modal":M(n)?"true":void 0,"aria-label":d?"Guide":void 0},!i&&e.progressBarPosition==="TOP"&&e.progressBarEnabled&&o.createElement(W,{progress:h,type:e.progressBarType,totalSteps:g}),o.createElement("div",{id:"userflowjs-bubble-content",className:"userflowjs-bubble-content"},o.createElement(Ee,{doc:r,lookupAttribute:X(t.data),buttons:n.buttons,questions:n.questions})),o.createElement(G,{draftMode:t.draftMode,muted:l,toggleMuted:e.voiceType!==L.NONE?()=>c({kind:"toggleMuted"}):void 0,close:a.closeDisabled?void 0:()=>e.flowXButtonBehavior===ce.DISMISS||m?s.endFlow(t,{endReason:D.USER_CLOSED}):c({kind:"showMenu"})}),!i&&e.progressBarPosition==="BOTTOM"&&e.progressBarEnabled&&o.createElement(W,{progress:h,type:e.progressBarType,position:J.BOTTOM,totalSteps:g}))};function Oe(e,s){if(!e)return"";typeof e=="string"&&(e=Q(e));const t=[],n=/[.!?;,]$/;function l(){const c=(t[t.length-1]||"").trim();c&&!c.match(n)&&t.push(".")}function d(c){if(ge(c)){if(c.text&&!c.silent){const u=c.text.split(`
|
|
2
2
|
`);u.forEach((m,i)=>{t.push(m),i<u.length-1&&(l(),t.push(`
|
|
3
|
-
`))})}return}switch(c.type){case"attribute":{const u=
|
|
3
|
+
`))})}return}switch(c.type){case"attribute":{const u=we(c,s);u&&t.push(u);break}default:a(c.children),["link"].includes(c.type)||(l(),t.push(`
|
|
4
4
|
|
|
5
|
-
`));break}}function a(c){c.forEach(u=>d(u))}return a(e.children),t.join("").trim().replace(new RegExp(" ","g")," ").replace(new RegExp("\b","g"),"")}const _e=({bubbleFrame:e,theme:s})=>{const t=R(),{dispatch:n}=A(),{muted:l,session:d,step:a}=k(),c=t.getAudio();f.useEffect(()=>{const r=()=>{n({kind:"speechPlaying"})},b=()=>{n({kind:"speechStopped"})};return c.addEventListener("playing",r),c.addEventListener("ended",b),c.addEventListener("pause",b),()=>{c.removeEventListener("playing",r),c.removeEventListener("ended",b),c.removeEventListener("pause",b),c.pause(),c.src="",n({kind:"speechStopped"})}},[n,c]),f.useEffect(()=>{if(t.audioReady)return;const r=e&&Pe(e)?e.contentWindow:null,b=()=>{window.removeEventListener("mousedown",E),r&&r.removeEventListener("mousedown",E)},E=()=>{b(),t.playAudio(null)};return window.addEventListener("mousedown",E),r&&r.addEventListener("mousedown",E),b},[e,t]);const u=f.useRef(d),m=f.useRef(s),i=f.useRef(a);return f.useEffect(()=>{u.current=d,m.current=s,i.current=a},[d,s,a]),f.useEffect(()=>{if(!t.audioReady||l){t.pauseAudio();return}let r=!1;return(async()=>{if(await new Promise(g=>setTimeout(g,1)),r)return;const E=await xe(t,u.current,m.current,i.current);r||E&&t.playAudio(E)})(),()=>{r=!0}},[l,t,a.id,s.voiceType,s.syntheticVoice]),null};async function xe(e,s,t,n){if(t.voiceType===L.SYNTHETIC&&typeof t.syntheticVoice=="string"&&n.content){e.ensureIdentified();const l=X(s.data),d=Oe(n.content,l);return e.getStepSpeech(t.syntheticVoice,d)}else if(t.voiceType===L.MANUAL&&n.speechAsset)return n.speechAsset.assetUrl;return null}function Pe(e){return e.tagName==="IFRAME"}const je="userflowjs-out-of-viewport-pointer--visible",Ue="userflowjs-out-of-viewport-pointer--visible-up",qe="userflowjs-out-of-viewport-pointer--visible-down",He=o.forwardRef((e,s)=>{const t=Z();return o.createElement("div",{ref:s,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:t+2}},o.createElement(Ae,{icon:Me}))});function Ve({subjectPosition:e,pointerRef:s,viewportClipRect:t}){const n=s.current;if(!n)return null;const l=n.getBoundingClientRect(),d=De(Ne());let a=e.direction,c,u;return a==null?null:(a==="down"&&t.bottom<l.height/2?a="up":a==="up"&&t.top>d&&(a="down"),c=e.left+e.width/2-l.width/2,u=a==="down"?t.bottom-l.height:t.top,{direction:a,left:c,top:u})}function $(e,s){const t=e.current;t&&(t.classList.toggle(je,s!=null),s&&(t.style.left=s.left+"px",t.style.top=s.top+"px",t.classList.toggle(Ue,s.direction==="up"),t.classList.toggle(qe,s.direction==="down")))}const We="userflowjs-fixed-widget--visible",$e=({theme:e})=>{const{step:s}=k();return o.createElement(o.Fragment,null,s.beacons.map(t=>o.createElement(ze,{key:t.id,beacon:t,theme:e})))},ze=({beacon:e,theme:s})=>{const{session:t}=k(),n=Z(),l=f.useRef(null),d=f.useRef(null),a=we(e.hiddenCondition),c=f.useMemo(()=>K(e.selector,t.data),[e.selector,t.data]),u=f.useCallback(({targetRect:i,clipEl:r,viewportClipRect:b})=>{const E=Ye({beacon:e,beaconRef:l,clipEl:r,viewportClipRect:b,targetRect:i,theme:s}),g=E&&Ve({subjectPosition:E.pointerSubjectPosition,pointerRef:d,viewportClipRect:b});ke(()=>{z(l,E),$(d,g)})},[e]),m=f.useCallback(()=>{z(l,null),$(d,null)},[]);return ye({selector:a?null:c,targetMoved:u,targetLost:m}),o.createElement(o.Fragment,null,o.createElement("div",{ref:l,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:n+2}},o.createElement("div",{className:"userflowjs-beacon__ring"}),o.createElement("div",{className:"userflowjs-beacon__ring"})),o.createElement(He,{ref:d}))};function Ye({beacon:e,beaconRef:s,clipEl:t,viewportClipRect:n,targetRect:l,theme:d}){if(!s.current||l.width===0||l.height===0)return null;const c=d.beaconSize,u=d.beaconSize,m=Ie(t);let i=0,r=0;switch(e.placement){case"top-left":case"left":case"bottom-left":i=l.left;break;case"top":case"center":case"bottom":i=l.left+l.width/2;break;default:i=l.left+l.width;break}switch(e.placement){case"left":case"center":case"right":r=l.top+l.height/2;break;case"bottom-left":case"bottom":case"bottom-right":r=l.top+l.height;break;default:r=l.top;break}i-=c/2,r-=u/2,i+=e.offsetX,r+=e.offsetY,i=Math.max(i,m.left-(t===document.documentElement?0:t.scrollLeft)),r=Math.max(r,m.top-(t===document.documentElement?0:t.scrollTop));const b=i+c,E=r+u,g=Math.min(32,.5*u);let h;E<n.top+g?h="up":r>n.bottom-g?h="down":h=null;const v=h==null;return{top:r,right:b,bottom:E,left:i,width:c,height:u,pointerSubjectPosition:{direction:h,left:i,width:c},visible:v}}function z(e,s){const t=e.current;t&&(t.classList.toggle(We,s!=null),s&&(t.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,t.style.visibility=s.visible?"visible":"hidden"))}const Ge=()=>{const{t:e}=x(),s=R(),{restart:t}=A(),{session:n,step:l}=k(),d=l.theme||n.version.theme,a=l.selector,c=!a||a.type===ue.AUTO&&!a.autoData,u=()=>s.endFlow(n,{endReason:D.USER_CLOSED});return o.createElement(o.Fragment,null,o.createElement(G,{draftMode:n.draftMode,close:u}),n.draftMode&&c?o.createElement("div",{className:"userflowjs-bubble-content"},o.createElement("div",{className:"userflowjs-bubble-alert p-like"},o.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"No tooltip target selected yet. Please go back to the Builder and select a tooltip target in ",o.createElement("b",null,"Step ",l.idx+1)," of"," ",o.createElement("b",null,n.flow.name),".")):n.draftMode&&d.tooltipMissingBehavior===O.END?o.createElement("div",{className:"userflowjs-bubble-content"},o.createElement("div",{className:"userflowjs-bubble-alert p-like"},o.createElement("p",null,o.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",o.createElement("b",null,"Step ",l.idx+1)," of"," ",o.createElement("b",null,n.flow.name)," was not found within"," ",d.tooltipMissingToleranceSeconds," ",parseFloat(d.tooltipMissingToleranceSeconds)===1?"second":"seconds","."),o.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),o.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),o.createElement("p",null,"Read more in our"," ",o.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):o.createElement(o.Fragment,null,o.createElement("div",{className:"userflowjs-bubble-content"},n.draftMode&&o.createElement("div",{className:"userflowjs-bubble-alert p-like"},o.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",o.createElement("b",null,"Step ",l.idx+1)," of"," ",o.createElement("b",null,n.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),o.createElement("p",null,o.createElement("b",null,e("tooltipTargetMissing.line1"))),o.createElement("p",null,e("tooltipTargetMissing.line2"))),o.createElement("div",{className:"userflowjs-bubble-buttons"},o.createElement(V,{appearance:"primary",onClick:t,text:e("menu.restart")}),o.createElement(V,{appearance:"default",onClick:u,text:e("menu.close")}))))},C="flowsMuted",Nt=({session:e,checklistSession:s,resourceCenterEmbedsChecklist:t})=>{const n=R(),[l,d]=f.useState(!1),[a,c]=f.useState(null),[u,m]=f.useReducer(Ke,void 0,()=>{const p=e,w=_(p);return{...Xe,session:p,step:w,muted:!!B.getItem(C),autoFocusRequested:te(w)}}),{session:i,step:r,speechPlaying:b,contentType:E}=u,{version:g}=i,h=M(r);let v=0;r.questions.some(p=>p.type===de.NPS)&&(v=420);const T=Fe(r.theme||g.theme),S=f.useMemo(()=>{let p=T.bubbleY;const w=s?.version.theme;return!t&&s&&w&&s.version.checklist?.launcherEnabled&&r.appearance===N.BUBBLE&&w.checklistLauncherPlacement===T.bubblePlacement&&(T.avatarType===pe.NONE||w.checklistLauncherX<T.bubbleX+T.avatarSize)&&(p=Math.max(T.bubbleY,w.checklistLauncherY+w.checklistLauncherHeight+T.bubbleY)),{...T,bubbleWidth:Math.max(T.bubbleWidth,v),bubbleY:p}},[t,s,r.appearance,T,v]);f.useEffect(()=>{i!==e&&m({kind:"updateSession",session:e});const p=w=>{w.session.id===i.id&&m({kind:"goToStep",stepId:w.step.id})};return n.on("gotostep",p),()=>{n.off("gotostep",p)}},[n,i,e]);const se=f.useMemo(()=>({dispatch:m,restart:()=>{n.goToStep(i,ee(i)),m({kind:"showFlow"})}}),[n,m,i]),re=f.useMemo(()=>r.selector&&K(r.selector,i.data),[r.selector,i.data]),le=f.useCallback(()=>{he(n,i,r.actions)},[n,i,r.actions]);f.useEffect(()=>{u.muted?B.setItem(C,"true"):B.removeItem(C)},[u.muted]);const P=i.locale?i.locale.standardLocaleId:S.languageId;f.useEffect(()=>{ve.changeLanguage(P)},[P]);const[j,ae]=f.useState(!1),ie=f.useCallback(p=>{ae(p),p&&n.send({kind:"ReportTooltipTargetMissing",sessionId:i.id,stepId:r.id}),p&&S.tooltipMissingBehavior===O.END&&!i.draftMode&&n.endFlow(i,{endReason:D.TOOLTIP_TARGET_MISSING})},[n,i,r.id,S.tooltipMissingBehavior]);return f.useEffect(()=>{if(!l||!u.autoFocusRequested)return;!n.originalActiveElement&&n.originalActiveElement!==a?.ownerDocument.defaultView?.frameElement&&(n.originalActiveElement=document.activeElement);let p=a?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(p&&p.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const w=a?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");w&&(p=w)}p&&typeof p.focus=="function"&&p.focus({preventScroll:!0}),m({kind:"autoFocused"})},[n,a,l,u.autoFocusRequested]),f.useEffect(()=>{const p=a?.ownerDocument.defaultView;if(!p)return;const w=()=>{m({kind:"focusOut"}),delete n.originalActiveElement},y=()=>{m({kind:"focusIn"})};return window.addEventListener("focusin",w),p.addEventListener("focusin",y),()=>{window.removeEventListener("focusin",w),p.removeEventListener("focusin",y)}},[a,n]),f.useEffect(()=>{if(!h||!a)return;const p=a.ownerDocument.defaultView,w=p?p.document:document,y=I=>{if(I.key==="Escape"&&!g.closeDisabled)n.endFlow(i,{endReason:D.USER_CLOSED});else if(I.key==="Tab"){const F=a.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),U=F[0],q=F[F.length-1],H=w.activeElement;I.shiftKey?H===U&&(I.preventDefault(),q.focus()):H===q&&(I.preventDefault(),U.focus())}};return window.addEventListener("keydown",y),p?.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y),p?.removeEventListener("keydown",y)}},[h,n,i,a,g.closeDisabled]),f.useEffect(()=>{if(u.scrollToTopRequested){if(a?.ownerDocument.defaultView?.frameElement){const p=a?.ownerDocument.body;p&&(p.scrollTop=0)}m({kind:"scrolledToTop"})}},[u.scrollToTopRequested,a]),o.createElement(ne.Provider,{value:se},o.createElement(oe.Provider,{value:u},o.createElement(Te.Provider,{value:i},o.createElement(Re,null,o.createElement(Se,{company:i.flow.company,theme:S,position:"fixed",stepKey:r.crossVersionId,stepAppearance:r.appearance,width:r.width,backgroundImageUrl:E==="flow"&&!j&&r.backgroundAsset?r.backgroundAsset.assetUrl:null,tooltipSelector:re,tooltipPlacement:r.tooltipPlacement,backdrop:r.backdrop,tooltipTargetBlocked:r.tooltipTargetBlocked,backdropPadding:r.backdropPadding,onTooltipTargetClick:le,onTooltipTargetMissingChange:ie,onModalBackdropClick:r.appearance===N.MODAL&&S.modalBackdropOnclick===fe.DISMISS&&!g.closeDisabled?()=>n.endFlow(i,{endReason:D.USER_CLOSED}):void 0,speaking:b,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:d,bubbleFrameRootRef:c,rootChildren:p=>o.createElement(Qe,{...p,theme:S})},E==="menu"?o.createElement(Ce,null):j&&S.tooltipMissingBehavior!==O.BUBBLE?o.createElement(Ge,null):o.createElement(Le,{theme:S}))))))},Qe=({visible:e,bubbleFrame:s,theme:t})=>{const n=k(),{step:l}=n,d=n.session.currentStep&&n.session.currentStep.id,[a,c]=f.useState(!1),u=f.useRef(d);return f.useEffect(()=>{e?c(!0):u.current!==d&&c(!1),u.current=d},[d,e]),o.createElement(o.Fragment,null,(e||a)&&n.contentType==="flow"&&o.createElement(o.Fragment,null,o.createElement(_e,{bubbleFrame:s,theme:t}),o.createElement($e,{theme:t})),l.triggers.map(m=>o.createElement(Be,{key:m.id,trigger:m})))},Xe={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Ke(e,s){switch(s.kind){case"updateSession":{let t;return s.session.id===e.session.id?t=s.session.version.steps.find(({crossVersionId:n})=>n===e.step.crossVersionId)||_(s.session):t=_(s.session),{...e,session:s.session,step:t}}case"goToStep":{const t=e.session.version.steps.find(n=>n.id===s.stepId);return t?{...e,step:t,contentType:"flow",autoFocusRequested:e.hasFocus||te(t),scrollToTopRequested:!0,shouldLabelDialog:!e.hasFocus}:e}case"toggleMuted":return{...e,muted:!e.muted};case"speechPlaying":return{...e,speechPlaying:!0};case"speechStopped":return{...e,speechPlaying:!1};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0,scrollToTopRequested:!0};case"showMenu":return{...e,contentType:"menu",autoFocusRequested:!0,scrollToTopRequested:!0};case"autoFocused":return{...e,autoFocusRequested:!1};case"focusIn":return{...e,hasFocus:!0};case"focusOut":return{...e,hasFocus:!1};case"scrolledToTop":return{...e,scrollToTopRequested:!1}}}function _(e){const{currentStep:s}=e,{steps:t}=e.version;if(s){const n=t.find(({crossVersionId:l})=>l===s.crossVersionId);if(!n)throw new Y("Session points to an unknown step: "+s.crossVersionId);return n}else return ee(e)}function ee(e){const s=e.version.steps[0];if(!s)throw new Y("Session has no current step and its version has no start step");return s}function te(e){return M(e)}function M(e){return e.appearance===N.MODAL||e.appearance===N.BUBBLE&&e.backdrop||e.appearance===N.TOOLTIP&&e.tooltipTargetBlocked}const ne=f.createContext(null),oe=f.createContext(null);function A(){return f.useContext(ne)}function k(){return f.useContext(oe)}export{Nt as FlowApp,oe as FlowStateContext,Nt as default,Xe as initialFlowState,M as isStepModal,A as useFlowDispatch,k as useFlowState};
|
|
5
|
+
`));break}}function a(c){c.forEach(u=>d(u))}return a(e.children),t.join("").trim().replace(new RegExp(" ","g")," ").replace(new RegExp("\b","g"),"")}const _e=({bubbleFrame:e,theme:s})=>{const t=R(),{dispatch:n}=A(),{muted:l,session:d,step:a}=k(),c=t.getAudio();f.useEffect(()=>{const r=()=>{n({kind:"speechPlaying"})},b=()=>{n({kind:"speechStopped"})};return c.addEventListener("playing",r),c.addEventListener("ended",b),c.addEventListener("pause",b),()=>{c.removeEventListener("playing",r),c.removeEventListener("ended",b),c.removeEventListener("pause",b),c.pause(),c.src="",n({kind:"speechStopped"})}},[n,c]),f.useEffect(()=>{if(t.audioReady)return;const r=e&&Pe(e)?e.contentWindow:null,b=()=>{window.removeEventListener("mousedown",E),r&&r.removeEventListener("mousedown",E)},E=()=>{b(),t.playAudio(null)};return window.addEventListener("mousedown",E),r&&r.addEventListener("mousedown",E),b},[e,t]);const u=f.useRef(d),m=f.useRef(s),i=f.useRef(a);return f.useEffect(()=>{u.current=d,m.current=s,i.current=a},[d,s,a]),f.useEffect(()=>{if(!t.audioReady||l){t.pauseAudio();return}let r=!1;return(async()=>{if(await new Promise(g=>setTimeout(g,1)),r)return;const E=await xe(t,u.current,m.current,i.current);r||E&&t.playAudio(E)})(),()=>{r=!0}},[l,t,a.id,s.voiceType,s.syntheticVoice]),null};async function xe(e,s,t,n){if(t.voiceType===L.SYNTHETIC&&typeof t.syntheticVoice=="string"&&n.content){e.ensureIdentified();const l=X(s.data),d=Oe(n.content,l);return e.getStepSpeech(t.syntheticVoice,d)}else if(t.voiceType===L.MANUAL&&n.speechAsset)return n.speechAsset.assetUrl;return null}function Pe(e){return e.tagName==="IFRAME"}const je="userflowjs-out-of-viewport-pointer--visible",Ue="userflowjs-out-of-viewport-pointer--visible-up",qe="userflowjs-out-of-viewport-pointer--visible-down",He=o.forwardRef((e,s)=>{const t=Z();return o.createElement("div",{ref:s,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:t+2}},o.createElement(Ae,{icon:Me}))});function Ve({subjectPosition:e,pointerRef:s,viewportClipRect:t}){const n=s.current;if(!n)return null;const l=n.getBoundingClientRect(),d=De(Ne());let a=e.direction,c,u;return a==null?null:(a==="down"&&t.bottom<l.height/2?a="up":a==="up"&&t.top>d&&(a="down"),c=e.left+e.width/2-l.width/2,u=a==="down"?t.bottom-l.height:t.top,{direction:a,left:c,top:u})}function $(e,s){const t=e.current;t&&(t.classList.toggle(je,s!=null),s&&(t.style.left=s.left+"px",t.style.top=s.top+"px",t.classList.toggle(Ue,s.direction==="up"),t.classList.toggle(qe,s.direction==="down")))}const We="userflowjs-fixed-widget--visible",$e=({theme:e})=>{const{step:s}=k();return o.createElement(o.Fragment,null,s.beacons.map(t=>o.createElement(ze,{key:t.id,beacon:t,theme:e})))},ze=({beacon:e,theme:s})=>{const{session:t}=k(),n=Z(),l=f.useRef(null),d=f.useRef(null),a=he(e.hiddenCondition),c=f.useMemo(()=>K(e.selector,t.data),[e.selector,t.data]),u=f.useCallback(({targetRect:i,clipEl:r,viewportClipRect:b})=>{const E=Ye({beacon:e,beaconRef:l,clipEl:r,viewportClipRect:b,targetRect:i,theme:s}),g=E&&Ve({subjectPosition:E.pointerSubjectPosition,pointerRef:d,viewportClipRect:b});ve(()=>{z(l,E),$(d,g)})},[e]),m=f.useCallback(()=>{z(l,null),$(d,null)},[]);return Te({selector:a?null:c,targetMoved:u,targetLost:m}),o.createElement(o.Fragment,null,o.createElement("div",{ref:l,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:n+2}},o.createElement("div",{className:"userflowjs-beacon__ring"}),o.createElement("div",{className:"userflowjs-beacon__ring"})),o.createElement(He,{ref:d}))};function Ye({beacon:e,beaconRef:s,clipEl:t,viewportClipRect:n,targetRect:l,theme:d}){if(!s.current||l.width===0||l.height===0)return null;const c=d.beaconSize,u=d.beaconSize,m=Ie(t);let i=0,r=0;switch(e.placement){case"top-left":case"left":case"bottom-left":i=l.left;break;case"top":case"center":case"bottom":i=l.left+l.width/2;break;default:i=l.left+l.width;break}switch(e.placement){case"left":case"center":case"right":r=l.top+l.height/2;break;case"bottom-left":case"bottom":case"bottom-right":r=l.top+l.height;break;default:r=l.top;break}i-=c/2,r-=u/2,i+=e.offsetX,r+=e.offsetY,i=Math.max(i,m.left-(t===document.documentElement?0:t.scrollLeft)),r=Math.max(r,m.top-(t===document.documentElement?0:t.scrollTop));const b=i+c,E=r+u,g=Math.min(32,.5*u);let h;E<n.top+g?h="up":r>n.bottom-g?h="down":h=null;const v=h==null;return{top:r,right:b,bottom:E,left:i,width:c,height:u,pointerSubjectPosition:{direction:h,left:i,width:c},visible:v}}function z(e,s){const t=e.current;t&&(t.classList.toggle(We,s!=null),s&&(t.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,t.style.visibility=s.visible?"visible":"hidden"))}const Ge=()=>{const{t:e}=x(),s=R(),{restart:t}=A(),{session:n,step:l}=k(),d=l.theme||n.version.theme,a=l.selector,c=!a||a.type===ue.AUTO&&!a.autoData,u=()=>s.endFlow(n,{endReason:D.USER_CLOSED});return o.createElement(o.Fragment,null,o.createElement(G,{draftMode:n.draftMode,close:u}),n.draftMode&&c?o.createElement("div",{className:"userflowjs-bubble-content"},o.createElement("div",{className:"userflowjs-bubble-alert p-like"},o.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"No tooltip target selected yet. Please go back to the Builder and select a tooltip target in ",o.createElement("b",null,"Step ",l.idx+1)," of"," ",o.createElement("b",null,n.flow.name),".")):n.draftMode&&d.tooltipMissingBehavior===O.END?o.createElement("div",{className:"userflowjs-bubble-content"},o.createElement("div",{className:"userflowjs-bubble-alert p-like"},o.createElement("p",null,o.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",o.createElement("b",null,"Step ",l.idx+1)," of"," ",o.createElement("b",null,n.flow.name)," was not found within"," ",d.tooltipMissingToleranceSeconds," ",parseFloat(d.tooltipMissingToleranceSeconds)===1?"second":"seconds","."),o.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),o.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),o.createElement("p",null,"Read more in our"," ",o.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):o.createElement(o.Fragment,null,o.createElement("div",{className:"userflowjs-bubble-content"},n.draftMode&&o.createElement("div",{className:"userflowjs-bubble-alert p-like"},o.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",o.createElement("b",null,"Step ",l.idx+1)," of"," ",o.createElement("b",null,n.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),o.createElement("p",null,o.createElement("b",null,e("tooltipTargetMissing.line1"))),o.createElement("p",null,e("tooltipTargetMissing.line2"))),o.createElement("div",{className:"userflowjs-bubble-buttons"},o.createElement(V,{appearance:"primary",onClick:t,text:e("menu.restart")}),o.createElement(V,{appearance:"default",onClick:u,text:e("menu.close")}))))},C="flowsMuted",kt=({session:e,checklistSession:s,resourceCenterEmbedsChecklist:t})=>{const n=R(),[l,d]=f.useState(!1),[a,c]=f.useState(null),[u,m]=f.useReducer(Ke,void 0,()=>{const p=e,w=_(p);return{...Xe,session:p,step:w,muted:!!B.getItem(C),autoFocusRequested:te(w)}}),{session:i,step:r,speechPlaying:b,contentType:E}=u,{version:g}=i,h=M(r);let v=0;r.questions.some(p=>p.type===de.NPS)&&(v=420);const T=Fe(r.theme||g.theme),S=f.useMemo(()=>{let p=T.bubbleY;const w=s?.version.theme;return!t&&s&&w&&s.version.checklist?.launcherEnabled&&r.appearance===N.BUBBLE&&w.checklistLauncherPlacement===T.bubblePlacement&&(T.avatarType===pe.NONE||w.checklistLauncherX<T.bubbleX+T.avatarSize)&&(p=Math.max(T.bubbleY,w.checklistLauncherY+w.checklistLauncherHeight+T.bubbleY)),{...T,bubbleWidth:Math.max(T.bubbleWidth,v),bubbleY:p}},[t,s,r.appearance,T,v]);f.useEffect(()=>{i!==e&&m({kind:"updateSession",session:e});const p=w=>{w.session.id===i.id&&m({kind:"goToStep",stepId:w.step.id})};return n.on("gotostep",p),()=>{n.off("gotostep",p)}},[n,i,e]);const se=f.useMemo(()=>({dispatch:m,restart:()=>{n.goToStep(i,ee(i)),m({kind:"showFlow"})}}),[n,m,i]),re=f.useMemo(()=>r.selector&&K(r.selector,i.data),[r.selector,i.data]),le=f.useCallback(()=>{Se(n,i,r.actions)},[n,i,r.actions]);f.useEffect(()=>{u.muted?B.setItem(C,"true"):B.removeItem(C)},[u.muted]);const P=i.locale?i.locale.standardLocaleId:S.languageId;f.useEffect(()=>{ke.changeLanguage(P)},[P]);const[j,ae]=f.useState(!1),ie=f.useCallback(p=>{ae(p),p&&n.send({kind:"ReportTooltipTargetMissing",sessionId:i.id,stepId:r.id}),p&&S.tooltipMissingBehavior===O.END&&!i.draftMode&&n.endFlow(i,{endReason:D.TOOLTIP_TARGET_MISSING})},[n,i,r.id,S.tooltipMissingBehavior]);return f.useEffect(()=>{if(!l||!u.autoFocusRequested)return;!n.originalActiveElement&&n.originalActiveElement!==a?.ownerDocument.defaultView?.frameElement&&(n.originalActiveElement=document.activeElement);let p=a?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(p&&p.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const w=a?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");w&&(p=w)}p&&typeof p.focus=="function"&&p.focus({preventScroll:!0}),m({kind:"autoFocused"})},[n,a,l,u.autoFocusRequested]),f.useEffect(()=>{const p=a?.ownerDocument.defaultView;if(!p)return;const w=()=>{m({kind:"focusOut"}),delete n.originalActiveElement},y=()=>{m({kind:"focusIn"})};return window.addEventListener("focusin",w),p.addEventListener("focusin",y),()=>{window.removeEventListener("focusin",w),p.removeEventListener("focusin",y)}},[a,n]),f.useEffect(()=>{if(!h||!a)return;const p=a.ownerDocument.defaultView,w=p?p.document:document,y=I=>{if(I.key==="Escape"&&!g.closeDisabled)n.endFlow(i,{endReason:D.USER_CLOSED});else if(I.key==="Tab"){const F=a.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),U=F[0],q=F[F.length-1],H=w.activeElement;I.shiftKey?H===U&&(I.preventDefault(),q.focus()):H===q&&(I.preventDefault(),U.focus())}};return window.addEventListener("keydown",y),p?.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y),p?.removeEventListener("keydown",y)}},[h,n,i,a,g.closeDisabled]),f.useEffect(()=>{if(u.scrollToTopRequested){if(a?.ownerDocument.defaultView?.frameElement){const p=a?.ownerDocument.body;p&&(p.scrollTop=0)}m({kind:"scrolledToTop"})}},[u.scrollToTopRequested,a]),o.createElement(ne.Provider,{value:se},o.createElement(oe.Provider,{value:u},o.createElement(ye.Provider,{value:i},o.createElement(Re,null,o.createElement(me,{company:i.flow.company,theme:S,position:"fixed",stepKey:r.crossVersionId,stepAppearance:r.appearance,width:r.width,backgroundImageUrl:E==="flow"&&!j&&r.backgroundAsset?r.backgroundAsset.assetUrl:null,tooltipSelector:re,tooltipPlacement:r.tooltipPlacement,backdrop:r.backdrop,tooltipTargetBlocked:r.tooltipTargetBlocked,backdropPadding:r.backdropPadding,onTooltipTargetClick:le,onTooltipTargetMissingChange:ie,onModalBackdropClick:r.appearance===N.MODAL&&S.modalBackdropOnclick===fe.DISMISS&&!g.closeDisabled?()=>n.endFlow(i,{endReason:D.USER_CLOSED}):void 0,speaking:b,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:d,bubbleFrameRootRef:c,rootChildren:p=>o.createElement(Qe,{...p,theme:S})},E==="menu"?o.createElement(Ce,null):j&&S.tooltipMissingBehavior!==O.BUBBLE?o.createElement(Ge,null):o.createElement(Le,{theme:S}))))))},Qe=({visible:e,bubbleFrame:s,theme:t})=>{const n=k(),{step:l}=n,d=n.session.currentStep&&n.session.currentStep.id,[a,c]=f.useState(!1),u=f.useRef(d);return f.useEffect(()=>{e?c(!0):u.current!==d&&c(!1),u.current=d},[d,e]),o.createElement(o.Fragment,null,(e||a)&&n.contentType==="flow"&&o.createElement(o.Fragment,null,o.createElement(_e,{bubbleFrame:s,theme:t}),o.createElement($e,{theme:t})),l.triggers.map(m=>o.createElement(Be,{key:m.id,trigger:m})))},Xe={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Ke(e,s){switch(s.kind){case"updateSession":{let t;return s.session.id===e.session.id?t=s.session.version.steps.find(({crossVersionId:n})=>n===e.step.crossVersionId)||_(s.session):t=_(s.session),{...e,session:s.session,step:t}}case"goToStep":{const t=e.session.version.steps.find(n=>n.id===s.stepId);return t?{...e,step:t,contentType:"flow",autoFocusRequested:e.hasFocus||te(t),scrollToTopRequested:!0,shouldLabelDialog:!e.hasFocus}:e}case"toggleMuted":return{...e,muted:!e.muted};case"speechPlaying":return{...e,speechPlaying:!0};case"speechStopped":return{...e,speechPlaying:!1};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0,scrollToTopRequested:!0};case"showMenu":return{...e,contentType:"menu",autoFocusRequested:!0,scrollToTopRequested:!0};case"autoFocused":return{...e,autoFocusRequested:!1};case"focusIn":return{...e,hasFocus:!0};case"focusOut":return{...e,hasFocus:!1};case"scrolledToTop":return{...e,scrollToTopRequested:!1}}}function _(e){const{currentStep:s}=e,{steps:t}=e.version;if(s){const n=t.find(({crossVersionId:l})=>l===s.crossVersionId);if(!n)throw new Y("Session points to an unknown step: "+s.crossVersionId);return n}else return ee(e)}function ee(e){const s=e.version.steps[0];if(!s)throw new Y("Session has no current step and its version has no start step");return s}function te(e){return M(e)}function M(e){return e.appearance===N.MODAL||e.appearance===N.BUBBLE&&e.backdrop||e.appearance===N.TOOLTIP&&e.tooltipTargetBlocked}const ne=f.createContext(null),oe=f.createContext(null);function A(){return f.useContext(ne)}function k(){return f.useContext(oe)}export{kt as FlowApp,oe as FlowStateContext,kt as default,Xe as initialFlowState,M as isStepModal,A as useFlowDispatch,k as useFlowState};
|
|
6
6
|
//# sourceMappingURL=FlowApp.js.map
|
package/FlowChrome.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{r as u,
|
|
2
|
-
`,{type:f.type,autoData:dt,excludeText:f.excludeText,precision:f.precision,text:f.text,css:f.css})}ot(),i.tooltipTargetMissing=!0,K.current()}},S)}K.current()},[l,E,f,t.tooltipMissingToleranceSeconds]),ie=u.useCallback(i=>{const S=a.current;ot(),S.tooltipTargetParams&&S.tooltipTargetParams.targetEl!==i.targetEl&&(S.tooltipPlacement=null),S.tooltipTargetParams=i,B({forceUpdatePosition:!0})},[B]);Te({selector:l===y.TOOLTIP&&f||null,targetMoved:ie,targetLost:re,onTargetClick:L});const ne=u.useCallback(()=>B({forceAppearanceLayout:!0}),[B]);de(ne),u.useEffect(()=>{if(!$||P||typeof le!="function")return;let i;const S=new le(()=>{i||(i=window.requestAnimationFrame(()=>{i=void 0,K.current()}))});return S.observe($,{childList:!0,attributes:!0,subtree:!0}),()=>{S.disconnect(),i&&window.cancelAnimationFrame(i)}},[$,P]),u.useLayoutEffect(()=>{K.current()}),u.useLayoutEffect(()=>{s==="absolute"&&B({forceAppearanceLayout:!0})},[s,T,M]);const ft=i=>{i.preventDefault(),i.stopPropagation()};return ke(t,!!R&&C===y.BUBBLE),w.createElement("div",{ref:nt,"data-testid":"flow-chrome",className:"userflowjs-flow-chrome userflowjs-theme-root",style:Be(t),dir:at},w.createElement("div",{className:"userflowjs-bubble",ref:mt,style:{zIndex:J}},w.createElement("div",{className:Vt({"userflowjs-bubble-outline":!0,[`userflowjs-bubble-outline--bubble-placement-${(t.bubblePlacement||"").toLowerCase().replace(/_/,"-")}`]:!0,"userflowjs-bubble-outline--minimizable":!!D,"userflowjs-bubble-outline--minimized":It})},w.createElement("div",{className:"userflowjs-bubble__frame-wrapper",...O},w.createElement(oe,{className:"userflowjs-bubble__frame",elRef:ut,stylesheet:ge,theme:t,onStylesheetsLoad:jt,noIframe:P,title:l.toLowerCase()},w.createElement("div",{className:"userflowjs-bubble-frame-root",ref:i=>{v&&v(i),kt(i)},style:g?{backgroundImage:`url("${encodeURI(g)}")`}:void 0},r,e.flowBranding&&w.createElement("div",{className:"userflowjs-bubble-made-with-userflow"},w.createElement("div",{className:"userflowjs-bubble-made-with-userflow__absolute"},w.createElement(G,{company:e},w.createElement(we,null),w.createElement("div",null,"Made with Userflow"))))))),w.createElement("div",{ref:bt,className:"userflowjs-bubble__avatar-notch"})),w.createElement(oe,{className:Vt({"userflowjs-bubble__avatar":!0,"userflowjs-bubble__avatar--minimizable":!!D,"userflowjs-bubble__avatar--speaking":!!F}),elRef:pt,stylesheet:Re,theme:t,onStylesheetsLoad:xt,noIframe:P,ariaHidden:!0,title:l.toLowerCase()},w.createElement("div",{className:Vt({"userflowjs-avatar-frame-root":!0,"userflowjs-avatar-frame-root--minimizable":!!D}),onClick:D?()=>h(i=>!i):void 0},w.createElement(Pe,{theme:t}))),w.createElement("div",{ref:ht,className:"userflowjs-bubble__tooltip-notch"})),w.createElement("div",{ref:gt,className:"userflowjs-tooltip-backdrop",onMouseDown:ft,style:{zIndex:U,pointerEvents:W?void 0:"none"}}),w.createElement("div",{ref:wt,className:"userflowjs-tooltip-block",onMouseDown:ft,style:{zIndex:U}}),w.createElement("div",{ref:Tt,className:"userflowjs-tooltip-block",onMouseDown:ft,style:{zIndex:U}}),w.createElement("div",{ref:Et,className:"userflowjs-tooltip-block",onMouseDown:ft,style:{zIndex:U}}),w.createElement("div",{ref:yt,className:"userflowjs-tooltip-block",onMouseDown:ft,style:{zIndex:U}}),w.createElement("div",{ref:Lt,className:"userflowjs-modal-backdrop",onMouseDown:ft,onClick:Z,style:{zIndex:U}}),x&&x({visible:I,bubbleFrame:ut.current}))},Pe=({theme:e})=>{const t="https://js.userflow.com/cartoon-avatars-no-bg/";let o;return e.avatarType===it.ASSET&&e.avatarAsset?o=e.avatarAsset.assetUrl:e.avatarType===it.CARTOON&&e.avatarName?o=t+e.avatarName+".svg?3":e.avatarType===it.URL&&e.avatarUrl?o=e.avatarUrl:o=t+"none.svg",w.createElement("img",{src:o,alt:""})},Oe=({company:e,children:t})=>w.createElement("a",{href:"https://userflow.com/?utm_source=made-with-userflow&utm_medium=link&utm_campaign=made-with-userflow-"+e.slug,target:"_blank",rel:"noopener noreferrer"},t);function je({layoutState:{appearance:e,theme:t,backdrop:o,tooltipTargetMissing:T},width:M,position:m,absoluteWidth:l,root:b,bubble:g,bubbleFrameRoot:f,avatar:E,avatarNotch:k,modalBackdrop:_,dir:W}){const Q=m==="absolute"?l||1024:rt(Ft()),{avatarSize:N,bubblePlacement:L}=t;let H=t.bubbleWidth,Z=null,tt=null,F=`userflowjs-bubble-frame-root userflowjs-bubble-frame-root--appearance-${e?.toLowerCase()}`,P="hidden",n=null,D=null,R=null,v=null,O="userflowjs-bubble__avatar-notch",x="hidden",r=null,s=null,z=null,q=null,G="userflowjs-modal-backdrop";switch((e===y.MODAL||!T&&e===y.BUBBLE&&o)&&(G+=" userflowjs-modal-backdrop--visible"),e){case y.BUBBLE:if(t.avatarType!==it.NONE){P="",x="",L===j.TOP_LEFT||L===j.TOP_CENTER||L===j.TOP_RIGHT?(Z=N+Mt,n=0,r=-2*Mt,O+=" userflowjs-bubble__avatar-notch--top"):(tt=N+Mt,R=0,z=-2*Mt,O+=" userflowjs-bubble__avatar-notch--bottom");const J=L===j.TOP_LEFT||L===j.TOP_CENTER||L===j.BOTTOM_LEFT||L===j.BOTTOM_CENTER||L===j.CENTER;W==="ltr"&&J||W==="rtl"&&!J?(v=0,q=N,O+=" userflowjs-bubble__avatar-notch--left"):(D=0,s=N,O+=" userflowjs-bubble__avatar-notch--right")}break;case y.MODAL:H=t.modalWidth,t.avatarType!==it.NONE&&(P="",v=`calc(50% - ${N/2}px)`,n=-N/2);break;case y.TOOLTIP:H=t.tooltipWidth;break}M!=null&&(H=M),H=Math.min(H,Q-2*At),b.classList.toggle("userflowjs-flow-chrome--position-absolute",m==="absolute"),b.classList.toggle("userflowjs-flow-chrome--position-relative",m==="relative"),b.classList.toggle("userflowjs-flow-chrome--position-fixed",m==="fixed"),b.classList.toggle("userflowjs-flow-chrome--appearance-modal",e===y.MODAL);const et=e!=null&&e!==y.HIDDEN;b.style.position="",b.style.top="",b.style.left="",b.style.visibility=et?"":"hidden",b.style.animation=et?"":"none",d(g,"width",rt(H)),d(g,"padding-top",Z),d(g,"padding-bottom",tt),f.className=F,d(E,"width",rt(t.avatarSize)),d(E,"height",rt(t.avatarSize)),E.style.visibility=P,d(E,"top",n),d(E,"right",D),d(E,"bottom",R),d(E,"left",v),k.className=O,k.style.visibility=x,d(k,"top",r),d(k,"right",s),d(k,"bottom",z),d(k,"left",q),_.className=G}function Ne({layoutState:e,animateIn:t,position:o,absoluteWidth:T,absoluteHeight:M,desiredTooltipPlacement:m,root:l,bubble:b,tooltipNotch:g,tooltipBackdrop:f,tooltipBlockTop:E,tooltipBlockRight:k,tooltipBlockBottom:_,tooltipBlockLeft:W,dir:Q}){const{appearance:N,theme:L,tooltipTargetParams:H,backdrop:Z,backdropPadding:tt}=e,{bubblePlacement:F}=L,P=At,n=L.tooltipNotchSize,D=10,{width:R,height:v}=b.getBoundingClientRect(),O=o==="absolute"?T||1024:rt(Ft()),x=o==="absolute"?M||768:rt(Wt());let r=0,s=0,z="userflowjs-bubble__tooltip-notch",q="hidden",G=null,et=null,J=null,U=null,Rt="userflowjs-tooltip-backdrop",at=null,nt=null,mt=null,ut=null,$=null,kt=null,bt=null,pt=null,ht="userflowjs-tooltip-block userflowjs-tooltip-block--top",gt=null,wt=null,Tt="userflowjs-tooltip-block userflowjs-tooltip-block--right",Et=null,yt=null,Lt="userflowjs-tooltip-block userflowjs-tooltip-block--bottom",Pt=null,Ot=null,jt="userflowjs-tooltip-block userflowjs-tooltip-block--left",Nt=null,xt=null;switch(N){case y.BUBBLE:{F===j.TOP_LEFT||F===j.BOTTOM_LEFT?r=L.bubbleX:F===j.TOP_CENTER||F===j.CENTER||F===j.BOTTOM_CENTER?r=(O-R)/2:r=O-R-L.bubbleX,F===j.TOP_LEFT||F===j.TOP_CENTER||F===j.TOP_RIGHT?s=L.bubbleY:F===j.CENTER?s=(x-v)/2:s=x-v-L.bubbleY,Q==="rtl"&&(r=O-r-R),r=Math.max(0,Math.min(O-R,r)),s=Math.max(0,Math.min(x-v,s));break}case y.MODAL:{let h=P;L.avatarType!==it.NONE&&(h+=L.avatarSize/2),r=P+(O-P*2-R)/2,s=h+(x-h-P-v)/2;break}case y.TOOLTIP:{let h;if(H){let{targetRect:a,viewportClipRect:C}=H;if(o==="absolute"){const B=l.offsetParent.getBoundingClientRect();C={top:0,right:O,bottom:x,left:0},a={top:a.top-B.top,right:a.right-B.left,bottom:a.bottom-B.top,left:a.left-B.left,width:a.width,height:a.height}}let lt=0;if(Z){const{paddingTop:B,paddingRight:K,paddingBottom:ct,paddingLeft:ot}=_e(tt);a={top:a.top-B,right:a.right+K,bottom:a.bottom+ct,left:a.left-ot,width:a.width+ot+K,height:a.height+B+ct},lt=Math.min(B,K,ct,ot)}const I=a,Y=L.backdropHighlightType==be.OUTSIDE?L.backdropHighlightSpread:0;if(Z&&Y&&(a={top:a.top-Y,right:a.right+Y,bottom:a.bottom+Y,left:a.left-Y,width:a.width+2*Y,height:a.height+2*Y}),h=xe({targetRect:a,bubbleWidth:R,bubbleHeight:v,containerWidth:O,containerHeight:x,viewportClipRect:C,tooltipNotchSize:n,currentTooltipPlacement:e.tooltipPlacement,desiredTooltipPlacement:m}),h===c.BELOW||h===c.ABOVE?(r=a.left+a.width/2-R/2,r=Math.max(P,Math.min(O-R-P,r)),U=Math.max(D,Math.min(R-D-n*2,a.left+a.width/2-n-r)),h===c.BELOW?G=-n*2:J=-n*2):h===c.RIGHT?(r=a.right+n,r=Math.max(r,C.left+n),r=Math.min(r,C.right+n),r=Math.max(r,n),r=Math.min(r,O-R)):(r=a.left-n-R,r=Math.max(r,C.left-R-n),r=Math.min(r,C.right-R-n),r=Math.max(r,0),r=Math.min(r,O-R-n)),h===c.LEFT||h===c.RIGHT?(s=a.top+a.height/2-v/2,s=Math.max(P,Math.min(x-v-P,s)),G=Math.max(D,Math.min(v-D-n*2,a.top+a.height/2-n-s)),h===c.LEFT?et=-n*2:U=-n*2):h===c.BELOW?(s=a.bottom+n,s=Math.max(s,C.top+n),s=Math.min(s,C.bottom+n),s=Math.max(s,n),s=Math.min(s,x-v)):(s=a.top-n-v,s=Math.max(s,C.top-v-n),s=Math.min(s,C.bottom-v-n),s=Math.max(s,0),s=Math.min(s,x-v-n)),Z){const B=window.getComputedStyle(H.targetEl);at=Math.max(0,I.top),nt=Math.max(0,O-I.right),mt=Math.max(0,x-I.bottom),ut=Math.max(0,I.left),$=Math.max(0,Ht(B.borderTopLeftRadius)+lt),kt=Math.max(0,Ht(B.borderTopRightRadius)+lt),bt=Math.max(0,Ht(B.borderBottomRightRadius)+lt),pt=Math.max(0,Ht(B.borderBottomLeftRadius)+lt),gt=Math.max(0,I.right),wt=Math.max(0,I.top),Et=Math.max(0,I.right),yt=Math.max(0,I.bottom),Pt=Math.max(0,I.left),Ot=Math.max(0,I.bottom),Nt=Math.max(0,I.left),xt=Math.max(0,I.top)}}else h=m||c.BELOW,(h===c.BELOW||h===c.ABOVE)&&(U=R/2-n,h===c.BELOW?G=-n*2:J=-n*2),(h===c.LEFT||h===c.RIGHT)&&(G=v/2-n,h===c.LEFT?et=-n*2:U=-n*2);e.tooltipPlacement=h,z+=` userflowjs-bubble__tooltip-notch--${h.toLowerCase()}`,q="",Z&&(Rt+=" userflowjs-tooltip-backdrop--visible",ht+=" userflowjs-tooltip-block--visible",Tt+=" userflowjs-tooltip-block--visible",Lt+=" userflowjs-tooltip-block--visible",jt+=" userflowjs-tooltip-block--visible");break}}b.style.transition="";let vt=r,It=s;if(t&&(b.style.opacity="0",N===y.TOOLTIP))switch(e.tooltipPlacement){case c.BELOW:s+=24;break;case c.ABOVE:s-=24;break;case c.RIGHT:r+=24;break;case c.LEFT:r-=24;break}if(o!=="relative"&&se(b,r,s),g.className=z,g.style.visibility=q,d(g,"top",G),d(g,"right",et),d(g,"bottom",J),d(g,"left",U),f.className=Rt,d(f,"top",at),d(f,"right",nt),d(f,"bottom",mt),d(f,"left",ut),d(f,"border-top-left-radius",$),d(f,"border-top-right-radius",kt),d(f,"border-bottom-right-radius",bt),d(f,"border-bottom-left-radius",pt),E.className=ht,d(E,"width",gt),d(E,"height",wt),k.className=Tt,d(k,"left",Et),d(k,"height",yt),_.className=Lt,d(_,"left",Pt),d(_,"top",Ot),W.className=jt,d(W,"width",Nt),d(W,"top",xt),t){b.offsetWidth;const h="opacity 250ms linear";N===y.TOOLTIP?b.style.transition=`${h}, transform 500ms cubic-bezier(0.25, 0.8, 0.5, 1)`:b.style.transition=h,b.style.opacity="1",o!=="relative"&&se(b,vt,It)}}function xe({targetRect:e,bubbleWidth:t,bubbleHeight:o,containerWidth:T,containerHeight:M,viewportClipRect:m,tooltipNotchSize:l,currentTooltipPlacement:b,desiredTooltipPlacement:g}){if(e.bottom<=m.top)return o+l<=M-m.top?c.BELOW:c.ABOVE;if(e.top>=m.bottom)return o+l<=m.bottom?c.ABOVE:c.BELOW;if(e.right<=m.left)return t+l<=T-m.left?c.RIGHT:c.LEFT;if(e.left>=m.right)return t+l<=m.right?c.LEFT:c.RIGHT;const f=k=>{const _=e.left+e.width/2,W=_>=m.left&&_<=m.right,Q=e.top+e.height/2,N=Q>=m.top&&Q<=m.bottom;switch(k){case c.BELOW:return M-e.bottom>o+l&&W;case c.ABOVE:return e.top>o+l&&W;case c.RIGHT:return T-e.right>t+l&&N;case c.LEFT:return e.left>t+l&&N}};if(g&&f(g))return g;if(b&&f(b))return b;const E=[{placement:c.BELOW,dist:e.top},{placement:c.ABOVE,dist:M-e.bottom},{placement:c.RIGHT,dist:e.left},{placement:c.LEFT,dist:T-e.right}];E.sort((k,_)=>k.dist-_.dist);for(const{placement:k}of E)if(f(k))return k;return c.BELOW}function d(e,t,o){o==null?e.style.removeProperty(t):e.style.setProperty(t,typeof o=="number"?o+"px":o,"important")}function se(e,t,o){t=Math.round(t),o=Math.round(o),e.style.transform=`translate3d(${t}px, ${o}px, 0px)`}function Ie(e){if(A.customScrollIntoView){A.customScrollIntoView(e);return}const{scrollPadding:t}=A;if(t&&ye(e)===document.scrollingElement){const o=t.top||0,T=t.right||0,M=t.bottom||0,m=t.left||0;let l=0,b=0;const g=e.getBoundingClientRect(),f=Ft(),E=Wt();if(g.top<o?l=g.top-o:g.bottom>E-M&&(l=g.bottom-E+M),g.left<m?b=g.left-m:g.right>f-T&&(b=g.right-f+T),l!=0||b!=0){window.scrollBy({top:l,left:b,behavior:"smooth"});return}}try{e.scrollIntoView({behavior:"smooth",block:"nearest"})}catch(o){console.warn("Userflow.js: scrollIntoView error (falling back to no options).",o),e.scrollIntoView()}}function _e(e){if(!e||e==="0")return{paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0};const t=e.trim().split(" ");if(t.length===1){const o=st(t[0]);return{paddingTop:o,paddingRight:o,paddingBottom:o,paddingLeft:o}}else if(t.length===2){const o=st(t[0]),T=st(t[1]);return{paddingTop:o,paddingRight:T,paddingBottom:o,paddingLeft:T}}else return{paddingTop:st(t[0]),paddingRight:st(t[1]),paddingBottom:st(t[2]),paddingLeft:st(t[3])}}function st(e){const t=parseInt(e,10);return isNaN(t)?0:t}export{Ye as F};
|
|
1
|
+
import{m as pe,n as he,d as ge,a as we}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{R as p,r as u}from"./vendor.react.js";import{D as Ht,a as Te,g as Ee}from"./stylesheets.js";import"./vendor.core-js.js";import{u as ie}from"./vendor.react-i18next.js";import{u as ye,F as le}from"./use-window-resize.js";import{c as $,f as v,q as it,F as ve,r as O,z as Be,y as c}from"./userflow.js";import{a as Le,f as Me}from"./flow-host.styl.js";import{u as ke,b as Re}from"./use-selector-element-monitoring.js";import{S as je}from"./logomark.js";import{o as At}from"./vendor.obj-str.js";import{d as zt,c as Ct,h as nt,q as Pe,k as se,M as re,p as Dt,s as Oe,m as Ne}from"./roots.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},e=new Error().stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="87e19637-164f-4fdd-9490-7bcadb88e03a",t._sentryDebugIdIdentifier="sentry-dbid-87e19637-164f-4fdd-9490-7bcadb88e03a")}catch{}})();const Qe=({draftMode:t,muted:e,toggleMuted:o,close:w,minimize:E})=>{const{t:f}=ie();return p.createElement("div",{className:"userflowjs-bubble-toolbar"},t&&p.createElement("div",{className:"userflowjs-bubble-draft"},typeof t=="string"?t:"Preview"),o&&p.createElement("button",{className:"userflowjs-bubble-toolbar-button",onClick:o,"aria-label":e?"Unmute":"Mute"},e?p.createElement(Ht,{icon:pe}):p.createElement(Ht,{icon:he})),E&&p.createElement("button",{"data-testid":"minimize-button",className:"userflowjs-bubble-toolbar-button",onClick:E,"aria-label":"Minimize checklist"},p.createElement(Ht,{icon:ge})),w&&p.createElement("button",{"data-testid":"close-button",className:"userflowjs-bubble-toolbar-button",onClick:w,"aria-label":f("menu.close")},p.createElement(Ht,{icon:we})))},Ie=new URL("avatar-frame.css",import.meta.url).href;function xe(t,e){const o=window.Intercom;u.useEffect(()=>{if(!(!e||!t.autoHideIntercom||typeof o!="function"||$.autoHide3pDisabled)){try{o("update",{hide_default_launcher:!0})}catch(a){console.warn("Userflow.js: Error when hiding Intercom launcher",a)}return()=>{if(!$.autoHide3pDisabled)try{o("update",{hide_default_launcher:!1})}catch(a){console.warn("Userflow.js: Error when unhiding Intercom launcher",a)}}}},[o,t.autoHideIntercom,e]);const w=window.$crisp;u.useEffect(()=>{if(!(!e||!t.autoHideCrisp||!w||$.autoHide3pDisabled)){try{w.push(["do","chat:hide"])}catch(a){console.warn("Userflow.js: Error when hiding Crisp Chat",a)}return()=>{if(!$.autoHide3pDisabled)try{w.push(["do","chat:show"])}catch(a){console.warn("Userflow.js: Error when unhiding Crisp Chat",a)}}}},[w,t.autoHideCrisp,e]);const E=window.HubSpotConversations;u.useEffect(()=>{if(!(!e||!t.autoHideHubspot||!E||$.autoHide3pDisabled)){try{E.widget.remove()}catch(a){console.warn("Userflow.js: Error when hiding HubSpot Chat",a)}return()=>{if(!$.autoHide3pDisabled)try{E.widget.load()}catch(a){console.warn("Userflow.js: Error when unhiding HubSpot Chat",a)}}}},[E,t.autoHideHubspot,e]);const f=window.drift;u.useEffect(()=>{if(!(!e||!t.autoHideDrift||!f||$.autoHide3pDisabled)){try{f.api.widget.hide()}catch(a){console.warn("Userflow.js: Error when hiding Drift Chat",a)}return()=>{if(!$.autoHide3pDisabled)try{f.api.widget.show()}catch(a){console.warn("Userflow.js: Error when unhiding Drift Chat",a)}}}},[f,t.autoHideDrift,e])}const Gt=16,kt=20,to=({company:t,theme:e,position:o,absoluteWidth:w,absoluteHeight:E,stepKey:f,stepAppearance:a,width:m,backgroundImageUrl:T,tooltipSelector:d,allowMissingTooltipTarget:y,tooltipPlacement:k,backdrop:_,tooltipTargetBlocked:A,backdropPadding:Q,zIndex:N,onTooltipTargetClick:B,onTooltipTargetMissingChange:H,onModalBackdropClick:q,onVisibleChange:tt,speaking:C,noIframe:R,MadeWithUserflow:n,minimizeOnAvatarClick:F,autoHide3pEnabled:M,bubbleFrameRootRef:L,frameWrapperHtmlAttributes:j,rootChildren:I,children:l,isModalAnnouncement:i})=>{const U=o||"absolute",X=k||null,V=Q||"0",et=n||He,ot=Le(),at=U==="fixed"?N??ot+1:1,J=at-1,{i18n:Rt}=ie(),st=Rt.dir(),ut=u.useRef(null),mt=u.useRef(null),ct=u.useRef(null),[Y,jt]=u.useState(null),pt=u.useRef(null),ht=u.useRef(null),gt=u.useRef(null),wt=u.useRef(null),Tt=u.useRef(null),Et=u.useRef(null),yt=u.useRef(null),vt=u.useRef(null),Bt=u.useRef(null);u.useLayoutEffect(()=>{const s=ut.current.style;s.animation="none",s.visibility="hidden",s.position="absolute",s.top="-99999px",s.left="-99999px"},[]);const{loaded:Pt}=Te(window,Me,e),[Ot,Nt]=u.useState(!1),[It,Ft]=u.useState(!1),Lt=Pt&&Ot&&It;let[g,r]=u.useState(!1);a!==v.BUBBLE&&(F=!1,g=!1),u.useEffect(()=>{r(!1)},[f]);const P=u.useRef({appearance:null,width:null,theme:e,bubbleFrameHeight:0,backdrop:!1,backdropPadding:"0",prevTooltipTargetParams:null,tooltipTargetParams:null,desiredTooltipPlacement:null,tooltipPlacement:null,lastReportedTooltipTargetMissing:!1,tooltipTargetMissing:!1,tooltipTargetMissingTimeout:void 0,stepKeyScrolledIntoView:void 0,targetScrolledIntoView:null}),[lt,D]=u.useState(null),z=lt!=null&≪u.useEffect(()=>{tt&&tt(z)},[tt,z]);const x=u.useCallback(s=>{P.current.lastReportedTooltipTargetMissing!==s&&(P.current.lastReportedTooltipTargetMissing=s,H&&H(s))},[H]),G=u.useCallback(({forceAppearanceLayout:s,forceUpdatePosition:S}={})=>{const bt=ut.current,_t=mt.current,Mt=ct.current,$t=ht.current,Xt=pt.current,Yt=gt.current,Zt=wt.current,qt=Tt.current,Jt=Et.current,Kt=yt.current,Qt=vt.current,te=Bt.current;if(!bt||!_t||!Mt||!Y||!$t||!Xt||!Yt||!Zt||!qt||!Jt||!Kt||!Qt||!te||!Lt)return;const h=P.current,{tooltipTargetParams:St}=h;Ne();let W=a,ee=!1;W===v.TOOLTIP&&!y&&!St&&(h.tooltipTargetMissing?(W=v.BUBBLE,ee=!0):W=null);const oe=W!==h.appearance,de=m!==h.width;if((s||oe||de||e!==h.theme||_!=h.backdrop||V!=h.backdropPadding||X!==h.desiredTooltipPlacement)&&(h.appearance=W,h.width=m,h.theme=e,h.backdrop=_,h.backdropPadding=V,h.desiredTooltipPlacement=X,S=!0,De({layoutState:h,width:m,position:U,absoluteWidth:w,root:bt,bubble:_t,bubbleFrameRoot:Y,avatar:$t,avatarNotch:Xt,modalBackdrop:te,dir:st})),!R){const Z=Y.offsetHeight,Ut=zt(),Vt=Ct()<800?0:Gt,be=e.avatarType===it.NONE?0:W===v.BUBBLE?kt+e.avatarSize:W===v.MODAL?e.avatarSize/2:0,ae=Ut-2*Vt-be,Wt=Math.min(Z,ae);if(W&&Wt!==h.bubbleFrameHeight){if(h.bubbleFrameHeight=Wt,b(Mt,"height",nt(Wt)),Pe(Mt)&&Mt.contentDocument){const me=Mt.contentDocument.documentElement;me.style.overflowY=Z<=ae?"hidden":"scroll"}S=!0}}if(S&&W){let Z=oe;if(W===v.TOOLTIP){const Ut=h.tooltipTargetParams&&h.tooltipTargetParams.targetEl,Vt=h.prevTooltipTargetParams&&h.prevTooltipTargetParams.targetEl;Ut!==Vt&&(Z=!0)}h.prevTooltipTargetParams=h.tooltipTargetParams,Ce({layoutState:h,animateIn:Z,position:U,absoluteWidth:w,absoluteHeight:E,desiredTooltipPlacement:X,root:bt,bubble:_t,tooltipNotch:Yt,tooltipBackdrop:Zt,tooltipBlockTop:qt,tooltipBlockRight:Jt,tooltipBlockBottom:Kt,tooltipBlockLeft:Qt,dir:st})}if(W===v.TOOLTIP){const Z=St&&St.targetEl;Z&&h.stepKeyScrolledIntoView!==f&&h.targetScrolledIntoView!==Z&&(h.stepKeyScrolledIntoView=f,h.targetScrolledIntoView=Z,Se(Z))}else h.stepKeyScrolledIntoView=void 0,h.targetScrolledIntoView=null;x(ee),D(W)},[Lt,Y,f,a,m,e,U,w,E,y,X,_,V,R,x,st]),K=u.useRef(G);K.current=G;const ft=u.useRef(!1);u.useEffect(()=>{const s=()=>{ft.current=!0};return window.addEventListener("pagehide",s),()=>window.removeEventListener("pagehide",s)},[]);const xt=()=>{window.clearTimeout(P.current.tooltipTargetMissingTimeout),P.current.tooltipTargetMissingTimeout=void 0};u.useEffect(()=>xt,[]);const ue=u.useCallback(()=>{const s=P.current;if(s.tooltipTargetParams=null,y||(s.tooltipPlacement=null),a!==v.TOOLTIP){xt(),s.tooltipTargetMissing=!1;return}if(!y&&!s.tooltipTargetMissingTimeout){s.tooltipTargetMissing=!1;const S=d&&!se(d)&&d.type===ve.AUTO&&!d.autoData?1:parseFloat(e.tooltipMissingToleranceSeconds)*1e3;s.tooltipTargetMissingTimeout=window.setTimeout(()=>{if(!ft.current){if(d&&!se(d)){let bt=d.autoData;if(d.autoData)try{bt=JSON.parse(d.autoData)}catch{}console.warn(`Userflow.js: Tooltip target not found on page.
|
|
2
|
+
`,{type:d.type,autoData:bt,excludeText:d.excludeText,precision:d.precision,text:d.text,css:d.css})}xt(),s.tooltipTargetMissing=!0,K.current()}},S)}K.current()},[a,y,d,e.tooltipMissingToleranceSeconds]),ce=u.useCallback(s=>{const S=P.current;xt(),S.tooltipTargetParams&&S.tooltipTargetParams.targetEl!==s.targetEl&&(S.tooltipPlacement=null),S.tooltipTargetParams=s,G({forceUpdatePosition:!0})},[G]);ke({selector:a===v.TOOLTIP&&d||null,targetMoved:ce,targetLost:ue,onTargetClick:B});const fe=u.useCallback(()=>G({forceAppearanceLayout:!0}),[G]);ye(fe),u.useEffect(()=>{if(!Y||R||typeof re!="function")return;let s;const S=new re(()=>{s||(s=window.requestAnimationFrame(()=>{s=void 0,K.current()}))});return S.observe(Y,{childList:!0,attributes:!0,subtree:!0}),()=>{S.disconnect(),s&&window.cancelAnimationFrame(s)}},[Y,R]),u.useLayoutEffect(()=>{K.current()}),u.useLayoutEffect(()=>{U==="absolute"&&G({forceAppearanceLayout:!0})},[U,w,E]);const dt=s=>{s.preventDefault(),s.stopPropagation()};return xe(e,!!M&<===v.BUBBLE),p.createElement("div",{ref:ut,"data-testid":"flow-chrome",className:"userflowjs-flow-chrome userflowjs-theme-root",style:Ee(e),dir:st},p.createElement("div",{className:"userflowjs-bubble",ref:mt,style:{zIndex:at}},p.createElement("div",{className:At({"userflowjs-bubble-outline":!0,[`userflowjs-bubble-outline--bubble-placement-${(e.bubblePlacement||"").toLowerCase().replace(/_/,"-")}`]:!0,"userflowjs-bubble-outline--minimizable":!!F,"userflowjs-bubble-outline--minimized":g})},p.createElement("div",{className:"userflowjs-bubble__frame-wrapper",...j},p.createElement(le,{className:"userflowjs-bubble__frame",elRef:ct,stylesheet:Re,theme:e,onStylesheetsLoad:Nt,noIframe:R,title:a.toLowerCase()},p.createElement("div",{className:"userflowjs-bubble-frame-root",ref:s=>{L&&L(s),jt(s)},style:T?{backgroundImage:`url("${encodeURI(T)}")`}:void 0},l,t.flowBranding&&!i&&p.createElement("div",{className:"userflowjs-bubble-made-with-userflow"},p.createElement("div",{className:"userflowjs-bubble-made-with-userflow__absolute"},p.createElement(et,{company:t},p.createElement(je,null),p.createElement("div",null,"Made with Userflow"))))))),p.createElement("div",{ref:pt,className:"userflowjs-bubble__avatar-notch"})),p.createElement(le,{className:At({"userflowjs-bubble__avatar":!0,"userflowjs-bubble__avatar--minimizable":!!F,"userflowjs-bubble__avatar--speaking":!!C}),elRef:ht,stylesheet:Ie,theme:e,onStylesheetsLoad:Ft,noIframe:R,ariaHidden:!0,title:a.toLowerCase()},p.createElement("div",{className:At({"userflowjs-avatar-frame-root":!0,"userflowjs-avatar-frame-root--minimizable":!!F}),onClick:F?()=>r(s=>!s):void 0},p.createElement(_e,{theme:e}))),p.createElement("div",{ref:gt,className:"userflowjs-bubble__tooltip-notch"})),p.createElement("div",{ref:wt,className:"userflowjs-tooltip-backdrop",onMouseDown:dt,style:{zIndex:J,pointerEvents:A?void 0:"none"}}),p.createElement("div",{ref:Tt,className:"userflowjs-tooltip-block",onMouseDown:dt,style:{zIndex:J}}),p.createElement("div",{ref:Et,className:"userflowjs-tooltip-block",onMouseDown:dt,style:{zIndex:J}}),p.createElement("div",{ref:yt,className:"userflowjs-tooltip-block",onMouseDown:dt,style:{zIndex:J}}),p.createElement("div",{ref:vt,className:"userflowjs-tooltip-block",onMouseDown:dt,style:{zIndex:J}}),p.createElement("div",{ref:Bt,className:"userflowjs-modal-backdrop",onMouseDown:dt,onClick:q,style:{zIndex:J}}),I&&I({visible:z,bubbleFrame:ct.current}))},_e=({theme:t})=>{const e="https://js.userflow.com/cartoon-avatars-no-bg/";let o;return t.avatarType===it.ASSET&&t.avatarAsset?o=t.avatarAsset.assetUrl:t.avatarType===it.CARTOON&&t.avatarName?o=e+t.avatarName+".svg?3":t.avatarType===it.URL&&t.avatarUrl?o=t.avatarUrl:o=e+"none.svg",p.createElement("img",{src:o,alt:""})},He=({company:t,children:e})=>p.createElement("a",{href:"https://userflow.com/?utm_source=made-with-userflow&utm_medium=link&utm_campaign=made-with-userflow-"+t.slug,target:"_blank",rel:"noopener noreferrer"},e);function De({layoutState:{appearance:t,theme:e,backdrop:o,tooltipTargetMissing:w},width:E,position:f,absoluteWidth:a,root:m,bubble:T,bubbleFrameRoot:d,avatar:y,avatarNotch:k,modalBackdrop:_,dir:A}){const Q=f==="absolute"?a||1024:nt(Ct()),{avatarSize:N,bubblePlacement:B}=e;let H=e.bubbleWidth,q=null,tt=null,C=`userflowjs-bubble-frame-root userflowjs-bubble-frame-root--appearance-${t?.toLowerCase()}`,R="hidden",n=null,F=null,M=null,L=null,j="userflowjs-bubble__avatar-notch",I="hidden",l=null,i=null,U=null,X=null,V="userflowjs-modal-backdrop";switch((t===v.MODAL||!w&&t===v.BUBBLE&&o)&&(V+=" userflowjs-modal-backdrop--visible"),t){case v.BUBBLE:if(e.avatarType!==it.NONE){R="",I="",B===O.TOP_LEFT||B===O.TOP_CENTER||B===O.TOP_RIGHT?(q=N+kt,n=0,l=-2*kt,j+=" userflowjs-bubble__avatar-notch--top"):(tt=N+kt,M=0,U=-2*kt,j+=" userflowjs-bubble__avatar-notch--bottom");const ot=B===O.TOP_LEFT||B===O.TOP_CENTER||B===O.BOTTOM_LEFT||B===O.BOTTOM_CENTER||B===O.CENTER;A==="ltr"&&ot||A==="rtl"&&!ot?(L=0,X=N,j+=" userflowjs-bubble__avatar-notch--left"):(F=0,i=N,j+=" userflowjs-bubble__avatar-notch--right")}break;case v.MODAL:H=e.modalWidth,e.avatarType!==it.NONE&&(R="",L=`calc(50% - ${N/2}px)`,n=-N/2);break;case v.TOOLTIP:H=e.tooltipWidth;break}E!=null&&(H=E),H=Math.min(H,Q-2*Gt),m.classList.toggle("userflowjs-flow-chrome--position-absolute",f==="absolute"),m.classList.toggle("userflowjs-flow-chrome--position-relative",f==="relative"),m.classList.toggle("userflowjs-flow-chrome--position-fixed",f==="fixed"),m.classList.toggle("userflowjs-flow-chrome--appearance-modal",t===v.MODAL);const et=t!=null&&t!==v.HIDDEN;m.style.position="",m.style.top="",m.style.left="",m.style.visibility=et?"":"hidden",m.style.animation=et?"":"none",b(T,"width",nt(H)),b(T,"padding-top",q),b(T,"padding-bottom",tt),d.className=C,b(y,"width",nt(e.avatarSize)),b(y,"height",nt(e.avatarSize)),y.style.visibility=R,b(y,"top",n),b(y,"right",F),b(y,"bottom",M),b(y,"left",L),k.className=j,k.style.visibility=I,b(k,"top",l),b(k,"right",i),b(k,"bottom",U),b(k,"left",X),_.className=V}function Ce({layoutState:t,animateIn:e,position:o,absoluteWidth:w,absoluteHeight:E,desiredTooltipPlacement:f,root:a,bubble:m,tooltipNotch:T,tooltipBackdrop:d,tooltipBlockTop:y,tooltipBlockRight:k,tooltipBlockBottom:_,tooltipBlockLeft:A,dir:Q}){const{appearance:N,theme:B,tooltipTargetParams:H,backdrop:q,backdropPadding:tt}=t,{bubblePlacement:C}=B,R=Gt,n=B.tooltipNotchSize,F=10,{width:M,height:L}=m.getBoundingClientRect(),j=o==="absolute"?w||1024:nt(Ct()),I=o==="absolute"?E||768:nt(zt());let l=0,i=0,U="userflowjs-bubble__tooltip-notch",X="hidden",V=null,et=null,ot=null,at=null,J="userflowjs-tooltip-backdrop",Rt=null,st=null,ut=null,mt=null,ct=null,Y=null,jt=null,pt=null,ht="userflowjs-tooltip-block userflowjs-tooltip-block--top",gt=null,wt=null,Tt="userflowjs-tooltip-block userflowjs-tooltip-block--right",Et=null,yt=null,vt="userflowjs-tooltip-block userflowjs-tooltip-block--bottom",Bt=null,Pt=null,Ot="userflowjs-tooltip-block userflowjs-tooltip-block--left",Nt=null,It=null;switch(N){case v.BUBBLE:{C===O.TOP_LEFT||C===O.BOTTOM_LEFT?l=B.bubbleX:C===O.TOP_CENTER||C===O.CENTER||C===O.BOTTOM_CENTER?l=(j-M)/2:l=j-M-B.bubbleX,C===O.TOP_LEFT||C===O.TOP_CENTER||C===O.TOP_RIGHT?i=B.bubbleY:C===O.CENTER?i=(I-L)/2:i=I-L-B.bubbleY,Q==="rtl"&&(l=j-l-M),l=Math.max(0,Math.min(j-M,l)),i=Math.max(0,Math.min(I-L,i));break}case v.MODAL:{let g=R;B.avatarType!==it.NONE&&(g+=B.avatarSize/2),l=R+(j-R*2-M)/2,i=g+(I-g-R-L)/2;break}case v.TOOLTIP:{let g;if(H){let{targetRect:r,viewportClipRect:P}=H;if(o==="absolute"){const x=a.offsetParent.getBoundingClientRect();P={top:0,right:j,bottom:I,left:0},r={top:r.top-x.top,right:r.right-x.left,bottom:r.bottom-x.top,left:r.left-x.left,width:r.width,height:r.height}}let lt=0;if(q){const{paddingTop:x,paddingRight:G,paddingBottom:K,paddingLeft:ft}=Ue(tt);r={top:r.top-x,right:r.right+G,bottom:r.bottom+K,left:r.left-ft,width:r.width+ft+G,height:r.height+x+K},lt=Math.min(x,G,K,ft)}const D=r,z=B.backdropHighlightType==Be.OUTSIDE?B.backdropHighlightSpread:0;if(q&&z&&(r={top:r.top-z,right:r.right+z,bottom:r.bottom+z,left:r.left-z,width:r.width+2*z,height:r.height+2*z}),g=Fe({targetRect:r,bubbleWidth:M,bubbleHeight:L,containerWidth:j,containerHeight:I,viewportClipRect:P,tooltipNotchSize:n,currentTooltipPlacement:t.tooltipPlacement,desiredTooltipPlacement:f}),g===c.BELOW||g===c.ABOVE?(l=r.left+r.width/2-M/2,l=Math.max(R,Math.min(j-M-R,l)),at=Math.max(F,Math.min(M-F-n*2,r.left+r.width/2-n-l)),g===c.BELOW?V=-n*2:ot=-n*2):g===c.RIGHT?(l=r.right+n,l=Math.max(l,P.left+n),l=Math.min(l,P.right+n),l=Math.max(l,n),l=Math.min(l,j-M)):(l=r.left-n-M,l=Math.max(l,P.left-M-n),l=Math.min(l,P.right-M-n),l=Math.max(l,0),l=Math.min(l,j-M-n)),g===c.LEFT||g===c.RIGHT?(i=r.top+r.height/2-L/2,i=Math.max(R,Math.min(I-L-R,i)),V=Math.max(F,Math.min(L-F-n*2,r.top+r.height/2-n-i)),g===c.LEFT?et=-n*2:at=-n*2):g===c.BELOW?(i=r.bottom+n,i=Math.max(i,P.top+n),i=Math.min(i,P.bottom+n),i=Math.max(i,n),i=Math.min(i,I-L)):(i=r.top-n-L,i=Math.max(i,P.top-L-n),i=Math.min(i,P.bottom-L-n),i=Math.max(i,0),i=Math.min(i,I-L-n)),q){const x=window.getComputedStyle(H.targetEl);Rt=Math.max(0,D.top),st=Math.max(0,j-D.right),ut=Math.max(0,I-D.bottom),mt=Math.max(0,D.left),ct=Math.max(0,Dt(x.borderTopLeftRadius)+lt),Y=Math.max(0,Dt(x.borderTopRightRadius)+lt),jt=Math.max(0,Dt(x.borderBottomRightRadius)+lt),pt=Math.max(0,Dt(x.borderBottomLeftRadius)+lt),gt=Math.max(0,D.right),wt=Math.max(0,D.top),Et=Math.max(0,D.right),yt=Math.max(0,D.bottom),Bt=Math.max(0,D.left),Pt=Math.max(0,D.bottom),Nt=Math.max(0,D.left),It=Math.max(0,D.top)}}else g=f||c.BELOW,(g===c.BELOW||g===c.ABOVE)&&(at=M/2-n,g===c.BELOW?V=-n*2:ot=-n*2),(g===c.LEFT||g===c.RIGHT)&&(V=L/2-n,g===c.LEFT?et=-n*2:at=-n*2);t.tooltipPlacement=g,U+=` userflowjs-bubble__tooltip-notch--${g.toLowerCase()}`,X="",q&&(J+=" userflowjs-tooltip-backdrop--visible",ht+=" userflowjs-tooltip-block--visible",Tt+=" userflowjs-tooltip-block--visible",vt+=" userflowjs-tooltip-block--visible",Ot+=" userflowjs-tooltip-block--visible");break}}m.style.transition="";let Ft=l,Lt=i;if(e&&(m.style.opacity="0",N===v.TOOLTIP))switch(t.tooltipPlacement){case c.BELOW:i+=24;break;case c.ABOVE:i-=24;break;case c.RIGHT:l+=24;break;case c.LEFT:l-=24;break}if(o!=="relative"&&ne(m,l,i),T.className=U,T.style.visibility=X,b(T,"top",V),b(T,"right",et),b(T,"bottom",ot),b(T,"left",at),d.className=J,b(d,"top",Rt),b(d,"right",st),b(d,"bottom",ut),b(d,"left",mt),b(d,"border-top-left-radius",ct),b(d,"border-top-right-radius",Y),b(d,"border-bottom-right-radius",jt),b(d,"border-bottom-left-radius",pt),y.className=ht,b(y,"width",gt),b(y,"height",wt),k.className=Tt,b(k,"left",Et),b(k,"height",yt),_.className=vt,b(_,"left",Bt),b(_,"top",Pt),A.className=Ot,b(A,"width",Nt),b(A,"top",It),e){m.offsetWidth;const g="opacity 250ms linear";N===v.TOOLTIP?m.style.transition=`${g}, transform 500ms cubic-bezier(0.25, 0.8, 0.5, 1)`:m.style.transition=g,m.style.opacity="1",o!=="relative"&&ne(m,Ft,Lt)}}function Fe({targetRect:t,bubbleWidth:e,bubbleHeight:o,containerWidth:w,containerHeight:E,viewportClipRect:f,tooltipNotchSize:a,currentTooltipPlacement:m,desiredTooltipPlacement:T}){if(t.bottom<=f.top)return o+a<=E-f.top?c.BELOW:c.ABOVE;if(t.top>=f.bottom)return o+a<=f.bottom?c.ABOVE:c.BELOW;if(t.right<=f.left)return e+a<=w-f.left?c.RIGHT:c.LEFT;if(t.left>=f.right)return e+a<=f.right?c.LEFT:c.RIGHT;const d=k=>{const _=t.left+t.width/2,A=_>=f.left&&_<=f.right,Q=t.top+t.height/2,N=Q>=f.top&&Q<=f.bottom;switch(k){case c.BELOW:return E-t.bottom>o+a&&A;case c.ABOVE:return t.top>o+a&&A;case c.RIGHT:return w-t.right>e+a&&N;case c.LEFT:return t.left>e+a&&N}};if(T&&d(T))return T;if(m&&d(m))return m;const y=[{placement:c.BELOW,dist:t.top},{placement:c.ABOVE,dist:E-t.bottom},{placement:c.RIGHT,dist:t.left},{placement:c.LEFT,dist:w-t.right}];y.sort((k,_)=>k.dist-_.dist);for(const{placement:k}of y)if(d(k))return k;return c.BELOW}function b(t,e,o){o==null?t.style.removeProperty(e):t.style.setProperty(e,typeof o=="number"?o+"px":o,"important")}function ne(t,e,o){e=Math.round(e),o=Math.round(o),t.style.transform=`translate3d(${e}px, ${o}px, 0px)`}function Se(t){if($.customScrollIntoView){$.customScrollIntoView(t);return}const{scrollPadding:e}=$;if(e&&Oe(t)===document.scrollingElement){const o=e.top||0,w=e.right||0,E=e.bottom||0,f=e.left||0;let a=0,m=0;const T=t.getBoundingClientRect(),d=Ct(),y=zt();if(T.top<o?a=T.top-o:T.bottom>y-E&&(a=T.bottom-y+E),T.left<f?m=T.left-f:T.right>d-w&&(m=T.right-d+w),a!=0||m!=0){window.scrollBy({top:a,left:m,behavior:"smooth"});return}}try{t.scrollIntoView({behavior:"smooth",block:"nearest"})}catch(o){console.warn("Userflow.js: scrollIntoView error (falling back to no options).",o),t.scrollIntoView()}}function Ue(t){if(!t||t==="0")return{paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0};const e=t.trim().split(" ");if(e.length===1){const o=rt(e[0]);return{paddingTop:o,paddingRight:o,paddingBottom:o,paddingLeft:o}}else if(e.length===2){const o=rt(e[0]),w=rt(e[1]);return{paddingTop:o,paddingRight:w,paddingBottom:o,paddingLeft:w}}else return{paddingTop:rt(e[0]),paddingRight:rt(e[1]),paddingBottom:rt(e[2]),paddingLeft:rt(e[3])}}function rt(t){const e=parseInt(t,10);return isNaN(e)?0:e}export{Qe as B,to as F};
|
|
3
3
|
//# sourceMappingURL=FlowChrome.js.map
|
package/LauncherApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as i,r as u}from"./vendor.react.js";import{L as R,s as l,t as a,
|
|
1
|
+
import{R as i,r as u}from"./vendor.react.js";import{L as R,s as l,t as a,f as te,v as re,w as p,x as K,y as N}from"./userflow.js";import{u as ne,m as oe,d as ae,S as ce,R as se,h as le,r as ie}from"./use-selector-element-monitoring.js";import{u as ue,i as de}from"./client-context.js";import{o as U}from"./vendor.obj-str.js";import{a as fe,b as he,g as Ee,D as Te,u as me}from"./stylesheets.js";import{w as pe,f as be,L as ge,S as Ce}from"./flow-host.styl.js";import"./vendor.core-js.js";import{F as Le,B as Re}from"./FlowChrome.js";import{g as we}from"./flow-condition-types.js";import{T as Ae}from"./Trigger.js";import{r as V}from"./roots.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./vendor.i18next.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./use-window-resize.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./logomark.js";import"./vendor.date-fns.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},c=new Error().stack;c&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[c]="eb04ebe6-1ea8-47ce-a225-726c69c3667c",t._sentryDebugIdIdentifier="sentry-dbid-eb04ebe6-1ea8-47ce-a225-726c69c3667c")}catch{}})();const ve=i.forwardRef(({appearance:t,icon:c,buttonText:d,theme:T,noAnimation:E,noFixed:w,onClick:e,onMouseEnter:s,onMouseLeave:o,noPointerEvents:n,zIndex:m},r)=>{const{loaded:C}=fe(window,be,T),k=T&&t===R.BUTTON?T:null,{loaded:H}=he(window,k),I={"userflowjs-launcher":!0,"userflowjs-launcher--activate-on-click":!!e,"userflowjs-fixed-widget":!w},f={ref:r,style:{...Ee(T),zIndex:m||pe(ge),pointerEvents:n?"none":void 0},onClick:e,onMouseEnter:s,onMouseLeave:o};if(!C||!H)return null;switch(t){case R.BEACON:return i.createElement("div",{className:U({...I,"userflowjs-beacon":!0,"userflowjs-beacon--pulse":!E,"userflowjs-beacon--pulse-still":!!E}),...f},i.createElement("div",{className:"userflowjs-beacon__ring"}),i.createElement("div",{className:"userflowjs-beacon__ring"}));case R.BUTTON:return i.createElement("div",{className:U({...I,"userflowjs-launcher--button":!0}),...f},d);case R.HIDDEN:return null;case R.ICON:return i.createElement("div",{className:U({...I,"userflowjs-launcher--icon":!0}),...f},i.createElement(Te,{icon:c||"solid/info-circle",size:T.launcherIconSize}))}}),Ie="userflowjs-fixed-widget--visible",tt=({session:t,active:c})=>{const d=ue(),{version:T}=t,E=t.id,w=t.flow.id,e=t.version.launcher,[s,o]=u.useState(null),n=me(T.theme),m=t.locale?t.locale.standardLocaleId:n.languageId;u.useEffect(()=>{de.changeLanguage(m)},[m]);const{activateOn:r}=e,C=e.activeWhileTooltipHover||e.buttons.length>0,k=e.hiddenWhileActive&&r!==l.LAUNCHER_HOVER,H=!c||!k,I=r===l.LAUNCHER_CLICK||r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK||C,f=u.useRef({}),A=u.useCallback(()=>{let h=null;const{targetEl:b,clipEl:g,viewportClipRect:F}=f.current,S=s;S&&(b&&g&&F&&(h=ke({targetEl:b,subjectEl:S,clipEl:g,viewportClipRect:F,position:e.targetPosition,subjectAnchor:e.appearance===R.BEACON?"center":"side"})),ie(()=>{Oe(S,h)}));let M;e.appearance===R.HIDDEN?M=!!b:M=!!h,M&&!f.current.seenTriggered&&!E&&(f.current.seenTriggered=!0,d.launcherSeen(w))},[s,e,d,E,w]);u.useLayoutEffect(()=>{A()},[A]);const _=u.useRef(!1),y=u.useRef(!1),P=u.useRef(!1),x=u.useRef(),W=()=>{_.current=!0,v()},z=()=>{_.current=!1,v()},Z=()=>{y.current=!0,v()},$=()=>{y.current=!1,v()},X=()=>{P.current=!0,v()},q=()=>{P.current=!1,v()},v=()=>{O();const h=250;x.current=window.setTimeout(()=>B.current(),h)},O=u.useCallback(()=>{window.clearTimeout(x.current)},[]),G=()=>{if(r===l.LAUNCHER_CLICK||r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK)return;const h=r===l.LAUNCHER_HOVER||r===l.LAUNCHER_TARGET_HOVER,b=r===l.TARGET_HOVER||r===l.LAUNCHER_TARGET_HOVER;_.current&&(!k||!c)&&h||y.current&&b||P.current&&C?D():L()},B=u.useRef(G);B.current=G;const D=()=>{c||(O(),e.tooltipEnabled?d.activateLauncher(t):(d.activateLauncher(t),d.deactivateLauncher(t)),le(d,t,e.actions))},L=u.useCallback(()=>{c&&(O(),d.deactivateLauncher(t))},[c,d,t,O]),j=()=>{c?L():D()},J=u.useCallback(({targetEl:h,clipEl:b,viewportClipRect:g})=>{f.current.targetEl=h,f.current.clipEl=b,f.current.viewportClipRect=g,A()},[A]),Q=u.useCallback(()=>{f.current.targetEl=void 0,f.current.clipEl=void 0,A(),L()},[A,L]);ne({selector:e.targetSelector,targetMoved:J,targetLost:Q,onTargetMouseEnter:Z,onTargetMouseLeave:$,onTargetClick:r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK?j:void 0}),u.useEffect(()=>{if(!c)return;const h=b=>{const g=b.target;s&&s.contains(g)||(r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK)&&f.current.targetEl&&f.current.targetEl.contains(g)||L()};return window.addEventListener("click",h,{capture:!0}),()=>window.removeEventListener("click",h,{capture:!0})},[c,r,s,L]);const Y=Ne(e.tooltipPosition.side===a.AUTO?e.targetPosition:e.tooltipPosition),ee=u.useMemo(()=>e.content&&oe(ae(e.content),{buttons:e.buttons}),[e.content,e.buttons]);return i.createElement(ce.Provider,{value:t},H&&i.createElement(ve,{ref:o,appearance:e.appearance,icon:e.icon,buttonText:e.buttonText,theme:n,onClick:r===l.LAUNCHER_CLICK||r===l.LAUNCHER_TARGET_CLICK?j:void 0,onMouseEnter:W,onMouseLeave:z,noPointerEvents:r===l.TARGET_HOVER,zIndex:e.zIndex}),c&&i.createElement(Ce,null,i.createElement(Le,{company:t.flow.company,theme:n,position:"fixed",stepAppearance:te.TOOLTIP,width:e.tooltipWidth,tooltipSelector:e.tooltipAnchor===re.TARGET?f.current.targetEl:s,tooltipPlacement:Y,frameWrapperHtmlAttributes:{onMouseEnter:X,onMouseLeave:q},rootChildren:()=>i.createElement(i.Fragment,null,e.triggers.map(h=>i.createElement(Ae,{key:h.id,trigger:h})))},i.createElement(Re,{draftMode:t.draftMode,close:I?L:void 0}),i.createElement("div",{className:"userflowjs-bubble-content"},i.createElement(se,{doc:ee,lookupAttribute:we(t.data),buttons:e.buttons})))))};function ke({targetEl:t,subjectEl:c,clipEl:d,viewportClipRect:T,position:E,subjectAnchor:w}){const e=V(t);if(e.width===0||e.height===0)return null;const s=c.getBoundingClientRect();let o=0,n=0,{side:m,align:r}=E;switch(m===a.AUTO&&(m=a.TOP,r=p.END),m){case a.TOP:n=e.top;break;case a.BOTTOM:n=e.bottom;break;case a.LEFT:o=e.left;break;case a.RIGHT:o=e.right;break}switch(m){case a.TOP:case a.BOTTOM:switch(r){case p.START:o=e.left;break;case p.CENTER:o=e.left+e.width/2;break;case p.END:o=e.right;break}break;case a.LEFT:case a.RIGHT:switch(r){case p.START:n=e.top;break;case p.CENTER:n=e.top+e.height/2;break;case p.END:n=e.bottom;break}break}switch(E.xUnit===K.PERCENT?o+=E.xOffset/100*e.width:o+=E.xOffset,E.yUnit===K.PERCENT?n+=E.yOffset/100*e.height:n+=E.yOffset,w){case"center":o-=s.width/2,n-=s.height/2;break;case"side":switch(m){case a.TOP:n-=s.height;break;case a.LEFT:o-=s.width;break}switch(m){case a.TOP:case a.BOTTOM:switch(r){case p.CENTER:o-=s.width/2;break;case p.END:o-=s.width;break}break;case a.LEFT:case a.RIGHT:switch(r){case p.CENTER:n-=s.height/2;break;case p.END:n-=s.height;break}break}}if(o+s.width<T.left||o>T.right||n+s.height<T.top||n>T.bottom)return null;const C=V(d);return o=Math.max(o,C.left-d.scrollLeft),n=Math.max(n,C.top-d.scrollTop),o=Math.round(o),n=Math.round(n),{left:o,top:n}}function Oe(t,c){t.classList.toggle(Ie,c!=null),c&&(t.style.transform=`translate3d(${c.left}px, ${c.top}px, 0)`)}function Ne(t){switch(t.side){case a.AUTO:return null;case a.TOP:return N.ABOVE;case a.BOTTOM:return N.BELOW;case a.LEFT:return N.LEFT;case a.RIGHT:return N.RIGHT}}export{tt as LauncherApp,tt as default};
|
|
2
2
|
//# sourceMappingURL=LauncherApp.js.map
|