userflow.js-self-hosted 0.1.1009111 → 0.1.1009161
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/BuilderBar.js +1 -1
- package/ChecklistApp.js +1 -1
- package/ChecklistUI.js +1 -1
- package/ElementSelectionApp.js +1 -1
- package/FlowApp.js +2 -2
- package/FlowChrome.js +2 -2
- package/LauncherApp.js +1 -1
- package/NotificationsApp.js +1 -1
- package/ResourceCenterApp.js +4 -4
- package/ResourceCenterAssistantChat.js +2 -2
- package/StartConditionTestingApp.js +1 -1
- package/TrackerTestingApp.js +1 -1
- package/bubble-frame.styl.js +2 -2
- package/flow-condition-types.js +1 -1
- package/hash.txt +1 -1
- package/implicit-tracking.js +3 -0
- package/package.json +1 -1
- package/roots.js +2 -0
- package/stylesheets.js +1 -1
- package/ui.js +2 -2
- package/use-selector-element-monitoring.js +1 -1
- package/userflow.js +5 -5
- package/vendor.core-js.js +1 -1
package/BannerApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r,R as
|
|
1
|
+
import{r,R as n}from"./vendor.react.js";import{k as s,E as A}from"./userflow.js";import{u as D,i as v}from"./client-context.js";import{o as k}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{S as P,b as W,R as Y,B as z}from"./bubble-frame.styl.js";import{g as U}from"./flow-condition-types.js";import{f as H,w as K}from"./flow-host.styl.js";import{u as Z}from"./use-selector-element-monitoring.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 a=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},d=new Error().stack;d&&(a._sentryDebugIds=a._sentryDebugIds||{},a._sentryDebugIds[d]="d2d9b227-b577-457a-8a08-f5daf921b035",a._sentryDebugIdIdentifier="sentry-dbid-d2d9b227-b577-457a-8a08-f5daf921b035")}catch{}})();const Le=({session:a})=>{const d=D(),{version:c}=a,e=c.banner,p=x(c.theme),g=a.locale?a.locale.standardLocaleId:a.version.theme.languageId;r.useEffect(()=>{v.changeLanguage(g)},[g]);const t=r.useMemo(()=>document.createElement("div"),[]),[R,w]=r.useState(!1),{loaded:T}=C(window,H,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 "${a.flow.name||a.flow.id}"`),S(null)},[f,a.flow.name,a.flow.id]);Z({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=k({"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||K(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]),R?q.createPortal(n.createElement(P.Provider,{value:a},n.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:W,theme:p,onStylesheetsLoad:h,title:"Banner"},n.createElement("div",{ref:_,className:k({"userflowjs-banner-root":!0,[`userflowjs-banner-root--content-layout-${e.contentLayout}`]:!0,"userflowjs-theme-root":!0}),dir:v.dir()},n.createElement("div",{className:"userflowjs-banner-start-spacer"}),n.createElement("div",{className:"userflowjs-banner-inner",style:{maxWidth:i(e.maxContentWidth)}},n.createElement("div",{className:"userflowjs-banner-content"},n.createElement(Y,{doc:e.content,lookupAttribute:U(a.data)})),e.buttons.length>0&&n.createElement("div",{className:"userflowjs-banner-buttons"},e.buttons.map(o=>n.createElement(z,{key:o.id,button:o})))),c.closeDisabled?n.createElement("div",{className:"userflowjs-banner-start-spacer"}):n.createElement("button",{"data-testid":"userflow-banner-dismiss",className:"userflowjs-banner-close",onClick:()=>d.endFlow(a,{endReason:A.USER_CLOSED})},n.createElement(O,{icon:$}))))),t):null};export{Le as BannerApp,Le as default};
|
|
2
2
|
//# sourceMappingURL=BannerApp.js.map
|
package/BuilderBar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as e,r as t}from"./vendor.react.js";import{u as I,F as v}from"./use-window-resize.js";import{S as F}from"./logomark.js";import{o as L}from"./vendor.obj-str.js";import{f as k,a as B}from"./vendor.fortawesome.pro-light-svg-icons.js";import{
|
|
1
|
+
import{R as e,r as t}from"./vendor.react.js";import{u as I,F as v}from"./use-window-resize.js";import{S as F}from"./logomark.js";import{o as L}from"./vendor.obj-str.js";import{f as k,a as B}from"./vendor.fortawesome.pro-light-svg-icons.js";import{o as b}from"./userflow.js";import{a as D,D as N}from"./stylesheets.js";import"./vendor.core-js.js";(function(){try{var r=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},n=new Error().stack;n&&(r._sentryDebugIds=r._sentryDebugIds||{},r._sentryDebugIds[n]="5627ab59-5442-4e1e-9c72-bd4072c0f36b",r._sentryDebugIdIdentifier="sentry-dbid-5627ab59-5442-4e1e-9c72-bd4072c0f36b")}catch{}})();const _=new URL("builder-ui-host.css",import.meta.url).href,P=new URL("builder-ui-frame.css",import.meta.url).href,p="builderBarPos",O=e.forwardRef(({onReadyChange:r,children:n,buttons:u},y)=>{const{loaded:h}=D(window,_),[E,S]=t.useState(!1),o=h&&E,m=t.useRef(!1);t.useEffect(()=>{o&&!m.current&&r&&(m.current=!0,r(!0))},[o,r]);const i=t.useRef(null),[s,g]=t.useState(null),[l,w]=t.useState(()=>b.getItem(p)==="top"?"top":"bottom"),R=t.useCallback(a=>{w(a),b.setItem(p,a)},[]),d=t.useRef(0),f=t.useCallback(()=>{const a=i.current;if(!a||!s||!o)return;const c=s.clientHeight;c!==d.current&&(d.current=c,a.style.setProperty("height",c+"px","important"))},[o,s]);return t.useLayoutEffect(()=>{f()}),I(f),t.useImperativeHandle(y,()=>({getFrame:()=>i.current,getRootEl:()=>s}),[s]),e.createElement(e.Fragment,null,e.createElement(v,{className:L({"userflowjs-builder-bar":!0,"userflowjs-builder-bar--top":l==="top"}),style:{visibility:o?void 0:"hidden",animation:o?void 0:"none"},elRef:i,stylesheet:P,onStylesheetsLoad:S,title:"Builder bar"},o&&e.createElement("div",{className:"root",ref:g},e.createElement("div",{className:"logomark"},e.createElement(F,null)),e.createElement("div",{className:"main"},n),e.createElement("div",{className:"buttons"},u,e.createElement("button",{key:l,className:"btn btn--square btn--plain-on-dark",onClick:()=>R(l==="top"?"bottom":"top")},e.createElement(N,{icon:l==="top"?k:B,size:20}))))))});export{O as B};
|
|
2
2
|
//# sourceMappingURL=BuilderBar.js.map
|
package/ChecklistApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as s,R as c}from"./vendor.react.js";import{
|
|
1
|
+
import{r as s,R as c}from"./vendor.react.js";import{r as k,q as R,m as F,g as B}from"./userflow.js";import{F as _}from"./FlowChrome.js";import{i as N,u as C}from"./client-context.js";import{f as D,w as P,C as j,S as U}from"./flow-host.styl.js";import{a as A,D as H,u as I}from"./stylesheets.js";import{F as O}from"./use-window-resize.js";import{o as Z}from"./vendor.obj-str.js";import{z}from"./roots.js";import{l as W}from"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.core-js.js";import{u as X}from"./vendor.react-i18next.js";import{C as M}from"./ChecklistUI.js";import{B as Y}from"./BubbleToolbar.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./bubble-frame.styl.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./logomark.js";import"./use-selector-element-monitoring.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]="3a1e76d7-9e3d-4743-a7ff-37e50c2cfdc6",t._sentryDebugIdIdentifier="sentry-dbid-3a1e76d7-9e3d-4743-a7ff-37e50c2cfdc6")}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:o})=>{const d=t||"absolute",{i18n:n}=X(),m=n.dir(),{loaded:i}=A(window,D,e),[h,b]=s.useState(!1),f=i&&h;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",z(y)+"px","important"),E.style.setProperty("height",e.checklistLauncherHeight+"px","important"))});const p=e.checklistLauncherPlacement,x=p===k.TOP_LEFT||p===k.TOP_RIGHT,g=p===k.TOP_LEFT||p===k.BOTTOM_LEFT,T={zIndex:d==="fixed"?e.checklistZIndex!=null?e.checklistZIndex:P(j):1,top:x?e.checklistLauncherY+"px":void 0,bottom:x?void 0:e.checklistLauncherY+"px",[m==="ltr"?"left":"right"]:g?e.checklistLauncherX+"px":void 0,[m==="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(O,{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:b,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"},o===0?c.createElement(H,{icon:W}):o,c.createElement("div",{className:"userflowjs-a11y-only"},"uncompleted tasks")))))},ge=({session:t,checklistExpanded:e})=>{const{version:l}=t,r=l.checklist,a=t.locale?t.locale.standardLocaleId:t.version.theme.languageId;s.useEffect(()=>{N.changeLanguage(a)},[a]);const[u,o]=s.useState(!1);return e?c.createElement(q,{session:t,initialAutoFocus:u,setInitialAutoFocus:o}):r.launcherEnabled?c.createElement(V,{session:t,initialAutoFocus:u,setInitialAutoFocus:o}):null},q=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const r=C(),[a,u]=s.useState(null),{version:o}=t,d=o.checklist,n=I(o.theme),m=s.useMemo(()=>({...n,avatarType:R.NONE,bubblePlacement:n.checklistPlacement,bubbleX:n.checklistX,bubbleY:n.checklistY,bubbleWidth:n.checklistWidth}),[n]);return s.useEffect(()=>{const i=a?.ownerDocument.defaultView;if(!i)return;const h=b=>{b.key==="Escape"&&(l(!0),r.hideChecklist())};return i.addEventListener("keydown",h),()=>i.removeEventListener("keydown",h)},[a,l,r]),c.createElement(U,null,c.createElement(_,{company:t.flow.company,theme:m,position:"fixed",stepAppearance:F.BUBBLE,zIndex:n.checklistZIndex,autoHide3pEnabled:!0,backgroundImageUrl:d.backgroundAsset&&d.backgroundAsset.assetUrl,bubbleFrameRootRef:u},c.createElement("div",{role:"dialog","aria-label":"Checklist"},c.createElement(M,{session:t,initialAutoFocus:e}),c.createElement(Y,{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),[o,d]=s.useState(null),{version:n}=t,m=n.checklist,i=I(n.theme);return s.useEffect(()=>{!a||!o||!e||o.focus()},[r,o,a,e]),c.createElement(K,{position:"fixed",theme:i,onClick:h=>{l(h.detail===0),r.showChecklist()},onVisibleChange:u,buttonRef:d,text:m.launcherText,uncompletedCount:B(t)})};export{ge as ChecklistApp,ge as default};
|
|
2
2
|
//# sourceMappingURL=ChecklistApp.js.map
|
package/ChecklistUI.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as e,r}from"./vendor.react.js";import{E as R,
|
|
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,r as O,R as B}from"./bubble-frame.styl.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]="084ca119-5aa2-4f84-9d97-aa3e1ea9828f",t._sentryDebugIdIdentifier="sentry-dbid-084ca119-5aa2-4f84-9d97-aa3e1ea9828f")}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,
|
|
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{l 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]="5548f234-f380-4358-a16f-02731791b87a",p._sentryDebugIdIdentifier="sentry-dbid-5548f234-f380-4358-a16f-02731791b87a")}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,m 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}from"./BubbleToolbar.js";import{m as me,d as Q,R as be,i as Ee,g as ge,u as we,c as V,h as he,S as Te}from"./bubble-frame.styl.js";import{g as X,i as K}from"./flow-condition-types.js";import{u as R,i as ve}from"./client-context.js";import{F as Se}from"./FlowChrome.js";import{u as ye,r as ke}from"./use-selector-element-monitoring.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"./vendor.obj-str.js";import"./vendor.date-fns.js";import"./vendor.i18next.js";import"./use-window-resize.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./logomark.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]="8a8713a5-fb45-473e-895c-7f4536f953ad",e._sentryDebugIdIdentifier="sentry-dbid-8a8713a5-fb45-473e-895c-7f4536f953ad")}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&&me(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(be,{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(Ee(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
3
|
`))})}return}switch(c.type){case"attribute":{const u=ge(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=ve(Se());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});Ie(()=>{z(l,E),$(d,g)})},[e]),m=f.useCallback(()=>{z(l,null),$(d,null)},[]);return Ne({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=ye(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",Dt=({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:!!F.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=Be(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?F.setItem(C,"true"):F.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 B=a.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),U=B[0],q=B[B.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(De,{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(Fe,{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{Dt as FlowApp,oe as FlowStateContext,Dt 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=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};
|
|
6
6
|
//# sourceMappingURL=FlowApp.js.map
|
package/FlowChrome.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{r as u,R as w}from"./vendor.react.js";import{u as de,F as oe}from"./use-window-resize.js";import{c as A,
|
|
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 Re(t,!!k&&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":!!F,"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),Rt(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":!!F,"userflowjs-bubble__avatar--speaking":!!D}),elRef:pt,stylesheet:ke,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":!!F}),onClick:F?()=>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:R,modalBackdrop:_,dir:W}){const Q=m==="absolute"?l||1024:rt(Dt()),{avatarSize:N,bubblePlacement:L}=t;let H=t.bubbleWidth,Z=null,tt=null,D=`userflowjs-bubble-frame-root userflowjs-bubble-frame-root--appearance-${e?.toLowerCase()}`,P="hidden",n=null,F=null,k=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,k=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"):(F=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=D,d(E,"width",rt(t.avatarSize)),d(E,"height",rt(t.avatarSize)),E.style.visibility=P,d(E,"top",n),d(E,"right",F),d(E,"bottom",k),d(E,"left",v),R.className=O,R.style.visibility=x,d(R,"top",r),d(R,"right",s),d(R,"bottom",z),d(R,"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:R,tooltipBlockBottom:_,tooltipBlockLeft:W,dir:Q}){const{appearance:N,theme:L,tooltipTargetParams:H,backdrop:Z,backdropPadding:tt}=e,{bubblePlacement:D}=L,P=At,n=L.tooltipNotchSize,F=10,{width:k,height:v}=b.getBoundingClientRect(),O=o==="absolute"?T||1024:rt(Dt()),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,kt="userflowjs-tooltip-backdrop",at=null,nt=null,mt=null,ut=null,$=null,Rt=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:{D===j.TOP_LEFT||D===j.BOTTOM_LEFT?r=L.bubbleX:D===j.TOP_CENTER||D===j.CENTER||D===j.BOTTOM_CENTER?r=(O-k)/2:r=O-k-L.bubbleX,D===j.TOP_LEFT||D===j.TOP_CENTER||D===j.TOP_RIGHT?s=L.bubbleY:D===j.CENTER?s=(x-v)/2:s=x-v-L.bubbleY,Q==="rtl"&&(r=O-r-k),r=Math.max(0,Math.min(O-k,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-k)/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:k,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-k/2,r=Math.max(P,Math.min(O-k-P,r)),U=Math.max(F,Math.min(k-F-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-k)):(r=a.left-n-k,r=Math.max(r,C.left-k-n),r=Math.min(r,C.right-k-n),r=Math.max(r,0),r=Math.min(r,O-k-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(F,Math.min(v-F-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),Rt=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=k/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&&(kt+=" 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=kt,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",Rt),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),R.className=Tt,d(R,"left",Et),d(R,"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=R=>{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(R){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((R,_)=>R.dist-_.dist);for(const{placement:R}of E)if(f(R))return R;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=Dt(),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{r as u,R as w}from"./vendor.react.js";import{u as de,F as oe}from"./use-window-resize.js";import{c as A,m as y,q as it,F as me,r as j,z as be,y as c}from"./userflow.js";import{a as pe,f as he}from"./flow-host.styl.js";import{b as ge}from"./bubble-frame.styl.js";import{S as we}from"./logomark.js";import{o as Vt}from"./vendor.obj-str.js";import{u as Te}from"./use-selector-element-monitoring.js";import{d as Wt,c as Ft,h as rt,q as Ee,k as ae,M as le,p as Ht,s as ye,m as Le}from"./roots.js";import{a as ve,g as Be}from"./stylesheets.js";import"./vendor.core-js.js";import{u as Me}from"./vendor.react-i18next.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},t=new Error().stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="37741d44-a00a-41c9-bbb2-e6bbda7a4d60",e._sentryDebugIdIdentifier="sentry-dbid-37741d44-a00a-41c9-bbb2-e6bbda7a4d60")}catch{}})();const Re=new URL("avatar-frame.css",import.meta.url).href;function ke(e,t){const o=window.Intercom;u.useEffect(()=>{if(!(!t||!e.autoHideIntercom||typeof o!="function"||A.autoHide3pDisabled)){try{o("update",{hide_default_launcher:!0})}catch(l){console.warn("Userflow.js: Error when hiding Intercom launcher",l)}return()=>{if(!A.autoHide3pDisabled)try{o("update",{hide_default_launcher:!1})}catch(l){console.warn("Userflow.js: Error when unhiding Intercom launcher",l)}}}},[o,e.autoHideIntercom,t]);const T=window.$crisp;u.useEffect(()=>{if(!(!t||!e.autoHideCrisp||!T||A.autoHide3pDisabled)){try{T.push(["do","chat:hide"])}catch(l){console.warn("Userflow.js: Error when hiding Crisp Chat",l)}return()=>{if(!A.autoHide3pDisabled)try{T.push(["do","chat:show"])}catch(l){console.warn("Userflow.js: Error when unhiding Crisp Chat",l)}}}},[T,e.autoHideCrisp,t]);const M=window.HubSpotConversations;u.useEffect(()=>{if(!(!t||!e.autoHideHubspot||!M||A.autoHide3pDisabled)){try{M.widget.remove()}catch(l){console.warn("Userflow.js: Error when hiding HubSpot Chat",l)}return()=>{if(!A.autoHide3pDisabled)try{M.widget.load()}catch(l){console.warn("Userflow.js: Error when unhiding HubSpot Chat",l)}}}},[M,e.autoHideHubspot,t]);const m=window.drift;u.useEffect(()=>{if(!(!t||!e.autoHideDrift||!m||A.autoHide3pDisabled)){try{m.api.widget.hide()}catch(l){console.warn("Userflow.js: Error when hiding Drift Chat",l)}return()=>{if(!A.autoHide3pDisabled)try{m.api.widget.show()}catch(l){console.warn("Userflow.js: Error when unhiding Drift Chat",l)}}}},[m,e.autoHideDrift,t])}const At=16,Mt=20,Ye=({company:e,theme:t,position:o,absoluteWidth:T,absoluteHeight:M,stepKey:m,stepAppearance:l,width:b,backgroundImageUrl:g,tooltipSelector:f,allowMissingTooltipTarget:E,tooltipPlacement:k,backdrop:_,tooltipTargetBlocked:W,backdropPadding:Q,zIndex:N,onTooltipTargetClick:L,onTooltipTargetMissingChange:H,onModalBackdropClick:Z,onVisibleChange:tt,speaking:F,noIframe:P,MadeWithUserflow:n,minimizeOnAvatarClick:D,autoHide3pEnabled:R,bubbleFrameRootRef:v,frameWrapperHtmlAttributes:O,rootChildren:x,children:r})=>{const s=o||"absolute",z=k||null,q=Q||"0",G=n||Oe,et=pe(),J=s==="fixed"?N??et+1:1,U=J-1,{i18n:Rt}=Me(),at=Rt.dir(),nt=u.useRef(null),mt=u.useRef(null),ut=u.useRef(null),[$,kt]=u.useState(null),bt=u.useRef(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),Lt=u.useRef(null);u.useLayoutEffect(()=>{const i=nt.current.style;i.animation="none",i.visibility="hidden",i.position="absolute",i.top="-99999px",i.left="-99999px"},[]);const{loaded:Pt}=ve(window,he,t),[Ot,jt]=u.useState(!1),[Nt,xt]=u.useState(!1),vt=Pt&&Ot&&Nt;let[It,h]=u.useState(!1);l!==y.BUBBLE&&(D=!1,It=!1),u.useEffect(()=>{h(!1)},[m]);const a=u.useRef({appearance:null,width:null,theme:t,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}),[C,lt]=u.useState(null),I=C!=null&&vt;u.useEffect(()=>{tt&&tt(I)},[tt,I]);const Y=u.useCallback(i=>{a.current.lastReportedTooltipTargetMissing!==i&&(a.current.lastReportedTooltipTargetMissing=i,H&&H(i))},[H]),B=u.useCallback(({forceAppearanceLayout:i,forceUpdatePosition:S}={})=>{const dt=nt.current,_t=mt.current,Bt=ut.current,zt=pt.current,Gt=bt.current,$t=ht.current,Yt=gt.current,Xt=wt.current,Zt=Tt.current,qt=Et.current,Jt=yt.current,Kt=Lt.current;if(!dt||!_t||!Bt||!$||!zt||!Gt||!$t||!Yt||!Xt||!Zt||!qt||!Jt||!Kt||!vt)return;const p=a.current,{tooltipTargetParams:Dt}=p;Le();let V=l,Qt=!1;V===y.TOOLTIP&&!E&&!Dt&&(p.tooltipTargetMissing?(V=y.BUBBLE,Qt=!0):V=null);const te=V!==p.appearance,ue=b!==p.width;if((i||te||ue||t!==p.theme||_!=p.backdrop||q!=p.backdropPadding||z!==p.desiredTooltipPlacement)&&(p.appearance=V,p.width=b,p.theme=t,p.backdrop=_,p.backdropPadding=q,p.desiredTooltipPlacement=z,S=!0,je({layoutState:p,width:b,position:s,absoluteWidth:T,root:dt,bubble:_t,bubbleFrameRoot:$,avatar:zt,avatarNotch:Gt,modalBackdrop:Kt,dir:at})),!P){const X=$.offsetHeight,Ct=Wt(),St=Ft()<800?0:At,ce=t.avatarType===it.NONE?0:V===y.BUBBLE?Mt+t.avatarSize:V===y.MODAL?t.avatarSize/2:0,ee=Ct-2*St-ce,Ut=Math.min(X,ee);if(V&&Ut!==p.bubbleFrameHeight){if(p.bubbleFrameHeight=Ut,d(Bt,"height",rt(Ut)),Ee(Bt)&&Bt.contentDocument){const fe=Bt.contentDocument.documentElement;fe.style.overflowY=X<=ee?"hidden":"scroll"}S=!0}}if(S&&V){let X=te;if(V===y.TOOLTIP){const Ct=p.tooltipTargetParams&&p.tooltipTargetParams.targetEl,St=p.prevTooltipTargetParams&&p.prevTooltipTargetParams.targetEl;Ct!==St&&(X=!0)}p.prevTooltipTargetParams=p.tooltipTargetParams,Ne({layoutState:p,animateIn:X,position:s,absoluteWidth:T,absoluteHeight:M,desiredTooltipPlacement:z,root:dt,bubble:_t,tooltipNotch:$t,tooltipBackdrop:Yt,tooltipBlockTop:Xt,tooltipBlockRight:Zt,tooltipBlockBottom:qt,tooltipBlockLeft:Jt,dir:at})}if(V===y.TOOLTIP){const X=Dt&&Dt.targetEl;X&&p.stepKeyScrolledIntoView!==m&&p.targetScrolledIntoView!==X&&(p.stepKeyScrolledIntoView=m,p.targetScrolledIntoView=X,Ie(X))}else p.stepKeyScrolledIntoView=void 0,p.targetScrolledIntoView=null;Y(Qt),lt(V)},[vt,$,m,l,b,t,s,T,M,E,z,_,q,P,Y,at]),K=u.useRef(B);K.current=B;const ct=u.useRef(!1);u.useEffect(()=>{const i=()=>{ct.current=!0};return window.addEventListener("pagehide",i),()=>window.removeEventListener("pagehide",i)},[]);const ot=()=>{window.clearTimeout(a.current.tooltipTargetMissingTimeout),a.current.tooltipTargetMissingTimeout=void 0};u.useEffect(()=>ot,[]);const re=u.useCallback(()=>{const i=a.current;if(i.tooltipTargetParams=null,E||(i.tooltipPlacement=null),l!==y.TOOLTIP){ot(),i.tooltipTargetMissing=!1;return}if(!E&&!i.tooltipTargetMissingTimeout){i.tooltipTargetMissing=!1;const S=f&&!ae(f)&&f.type===me.AUTO&&!f.autoData?1:parseFloat(t.tooltipMissingToleranceSeconds)*1e3;i.tooltipTargetMissingTimeout=window.setTimeout(()=>{if(!ct.current){if(f&&!ae(f)){let dt=f.autoData;if(f.autoData)try{dt=JSON.parse(f.autoData)}catch{}console.warn(`Userflow.js: Tooltip target not found on page.
|
|
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};
|
|
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,
|
|
1
|
+
import{R as i,r as u}from"./vendor.react.js";import{L as R,s as l,t as a,m as te,v as re,w as p,x as K,y as N}from"./userflow.js";import{u as ne,r as oe}from"./use-selector-element-monitoring.js";import{m as ae,d as ce,S as se,R as le,h as ie}from"./bubble-frame.styl.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 me,u as Te}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}from"./FlowChrome.js";import{B as Re}from"./BubbleToolbar.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]="0cbf11cd-9bf9-4c6d-acc6-ba2911cfd57b",t._sentryDebugIdIdentifier="sentry-dbid-0cbf11cd-9bf9-4c6d-acc6-ba2911cfd57b")}catch{}})();const ve=i.forwardRef(({appearance:t,icon:c,buttonText:d,theme:m,noAnimation:E,noFixed:w,onClick:e,onMouseEnter:s,onMouseLeave:o,noPointerEvents:n,zIndex:T},r)=>{const{loaded:C}=fe(window,be,m),k=m&&t===R.BUTTON?m: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(m),zIndex:T||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(me,{icon:c||"solid/info-circle",size:m.launcherIconSize}))}}),Ie="userflowjs-fixed-widget--visible",nt=({session:t,active:c})=>{const d=ue(),{version:m}=t,E=t.id,w=t.flow.id,e=t.version.launcher,[s,o]=u.useState(null),n=Te(m.theme),T=t.locale?t.locale.standardLocaleId:n.languageId;u.useEffect(()=>{de.changeLanguage(T)},[T]);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"})),oe(()=>{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)),ie(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&&ae(ce(e.content),{buttons:e.buttons}),[e.content,e.buttons]);return i.createElement(se.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(le,{doc:ee,lookupAttribute:we(t.data),buttons:e.buttons})))))};function ke({targetEl:t,subjectEl:c,clipEl:d,viewportClipRect:m,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:T,align:r}=E;switch(T===a.AUTO&&(T=a.TOP,r=p.END),T){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(T){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(T){case a.TOP:n-=s.height;break;case a.LEFT:o-=s.width;break}switch(T){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<m.left||o>m.right||n+s.height<m.top||n>m.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{nt as LauncherApp,nt as default};
|
|
2
2
|
//# sourceMappingURL=LauncherApp.js.map
|
package/NotificationsApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as t}from"./vendor.react.js";import{u as
|
|
1
|
+
import{R as t}from"./vendor.react.js";import{u as i}from"./client-context.js";import{w as a,f as r,N as n}from"./flow-host.styl.js";import{a as l,D as m}from"./stylesheets.js";import{a as c}from"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.core-js.js";import"./vendor.object-assign.js";import"./vendor.i18next.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./userflow.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";import"./roots.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]="0203356c-0436-41b4-978c-5ac53730d7ba",e._sentryDebugIdIdentifier="sentry-dbid-0203356c-0436-41b4-978c-5ac53730d7ba")}catch{}})();const k=({notifications:e})=>{const{loaded:s}=l(window,r);return s?t.createElement("div",{className:"userflowjs-notifications",style:{zIndex:a(n)}},e.map(o=>t.createElement(d,{key:o.id,notification:o}))):null},d=({notification:e})=>{const s=i();return t.createElement("div",{className:"userflowjs-notifications__toast"},t.createElement("div",{className:"userflowjs-notifications__toast-content"},t.createElement("span",{className:"userflowjs-notifications__toast-label"},e.label),e.message),t.createElement("div",{className:"userflowjs-notifications__toast-dismiss",onClick:()=>s.dismissNotification(e.id)},t.createElement(m,{icon:c})))};export{k as NotificationsApp,k as default};
|
|
2
2
|
//# sourceMappingURL=NotificationsApp.js.map
|