userflow.js-self-hosted 0.1.1008336 → 0.1.1008385
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/BubbleToolbar.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 +5 -1
- package/FlowChrome.js +2 -1
- package/LauncherApp.js +1 -1
- package/NotificationsApp.js +1 -1
- package/ResourceCenterApp.js +4 -1
- package/ResourceCenterAssistantChat.js +4 -1
- package/StartConditionTestingApp.js +1 -1
- package/TrackerTestingApp.js +1 -1
- package/Trigger.js +1 -1
- package/bubble-frame.styl.js +10 -1
- package/client-context.js +1 -1
- package/flow-condition-types.js +1 -1
- package/flow-host.styl.js +1 -1
- package/hash.txt +1 -1
- package/logomark.js +1 -1
- package/package.json +1 -1
- package/stylesheets.js +1 -1
- package/ui.js +2 -1
- package/use-element-rect.js +1 -1
- package/use-selector-element-monitoring.js +1 -1
- package/use-window-resize.js +1 -1
- package/userflow.js +17 -1
- package/vendor.babel.runtime.js +2 -1
- package/vendor.date-fns.js +1 -1
- package/vendor.dompurify.js +5 -2
- package/vendor.fortawesome.pro-light-svg-icons.js +1 -1
- package/vendor.fortawesome.pro-regular-svg-icons.js +1 -1
- package/vendor.fortawesome.pro-solid-svg-icons.js +1 -1
- package/vendor.html-parse-stringify2.js +1 -1
- package/vendor.i18next.js +1 -1
- package/vendor.is-hotkey.js +1 -1
- package/vendor.marked.js +47 -1
- package/vendor.obj-str.js +1 -1
- package/vendor.object-assign.js +2 -3
- package/vendor.phoenix.js +1 -1
- package/vendor.react-dom.js +10 -3
- package/vendor.react-i18next.js +1 -1
- package/vendor.react.js +2 -3
- package/vendor.scheduler.js +2 -3
- package/vendor.uuid.js +1 -1
- package/vendor.void-elements.js +1 -1
package/BannerApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import{r,R as a}from"./vendor.react.js";import{i as s,E as A}from"./userflow.js";import{u as D,i as v}from"./client-context.js";import{o as R}from"./vendor.obj-str.js";import{u as x,a as C,D as O}from"./stylesheets.js";import{a as $}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{S as P,b as W,R as Y,B as z}from"./bubble-frame.styl.js";import{f as i,b 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{u as J}from"./use-element-rect.js";import"./vendor.html-parse-stringify2.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./vendor.date-fns.js";import"./vendor.scheduler.js";(function(){try{var n=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},d=new Error().stack;d&&(n._sentryDebugIds=n._sentryDebugIds||{},n._sentryDebugIds[d]="5925f3e7-73fe-4b53-add2-e99dc22979fd",n._sentryDebugIdIdentifier="sentry-dbid-5925f3e7-73fe-4b53-add2-e99dc22979fd")}catch{}})();const Se=({session:n})=>{const d=D(),{version:c}=n,e=c.banner,p=x(c.theme),g=n.locale?n.locale.standardLocaleId:n.version.theme.languageId;r.useEffect(()=>{v.changeLanguage(g)},[g]);const t=r.useMemo(()=>document.createElement("div"),[]),[k,w]=r.useState(!1),{loaded:T}=C(window,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 "${n.flow.name||n.flow.id}"`),S(null)},[f,n.flow.name,n.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=R({"userflowjs-banner":!0,[`userflowjs-banner--animate-${String(e.animate)}`]:!0,[`userflowjs-banner--embed-mode-${e.embedMode}`]:!0,[`userflowjs-banner--sticky-${String(e.sticky)}`]:!0,[`userflowjs-banner--overlay-${e.overlay}`]:!0});r.useLayoutEffect(()=>{t.className=L||""},[t,L]);const y=e.zIndex||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]),k?q.createPortal(a.createElement(P.Provider,{value:n},a.createElement(G,{key:M,className:"userflowjs-banner-frame",style:{maxWidth:i(e.maxWidth),marginTop:i(e.marginTop),marginRight:i(e.marginRight),marginBottom:i(e.marginBottom),marginLeft:i(e.marginLeft),borderRadius:i(e.borderRadius)},stylesheet:W,theme:p,onStylesheetsLoad:h,title:"Banner"},a.createElement("div",{ref:_,className:R({"userflowjs-banner-root":!0,[`userflowjs-banner-root--content-layout-${e.contentLayout}`]:!0,"userflowjs-theme-root":!0}),dir:v.dir()},a.createElement("div",{className:"userflowjs-banner-start-spacer"}),a.createElement("div",{className:"userflowjs-banner-inner",style:{maxWidth:i(e.maxContentWidth)}},a.createElement("div",{className:"userflowjs-banner-content"},a.createElement(Y,{doc:e.content,lookupAttribute:U(n.data)})),e.buttons.length>0&&a.createElement("div",{className:"userflowjs-banner-buttons"},e.buttons.map(o=>a.createElement(z,{key:o.id,button:o})))),c.closeDisabled?a.createElement("div",{className:"userflowjs-banner-start-spacer"}):a.createElement("button",{"data-testid":"userflow-banner-dismiss",className:"userflowjs-banner-close",onClick:()=>d.endFlow(n,{endReason:A.USER_CLOSED})},a.createElement(O,{icon:$}))))),t):null};export{Se as BannerApp,Se as default};
|
|
2
2
|
//# sourceMappingURL=BannerApp.js.map
|
package/BubbleToolbar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import{m as b,n as i,d as c,a as u}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{R as e}from"./vendor.react.js";import{D as o}from"./stylesheets.js";import"./vendor.html-parse-stringify2.js";import{u as m}from"./vendor.react-i18next.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},a=new Error().stack;a&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[a]="0b975459-178f-4d3c-859b-df565f917637",t._sentryDebugIdIdentifier="sentry-dbid-0b975459-178f-4d3c-859b-df565f917637")}catch{}})();const E=({draftMode:t,muted:a,toggleMuted:n,close:l,minimize:r})=>{const{t:s}=m();return e.createElement("div",{className:"userflowjs-bubble-toolbar"},t&&e.createElement("div",{className:"userflowjs-bubble-draft"},typeof t=="string"?t:"Preview"),n&&e.createElement("button",{className:"userflowjs-bubble-toolbar-button",onClick:n,"aria-label":a?"Unmute":"Mute"},a?e.createElement(o,{icon:b}):e.createElement(o,{icon:i})),r&&e.createElement("button",{"data-testid":"minimize-button",className:"userflowjs-bubble-toolbar-button",onClick:r,"aria-label":"Minimize checklist"},e.createElement(o,{icon:c})),l&&e.createElement("button",{"data-testid":"close-button",className:"userflowjs-bubble-toolbar-button",onClick:l,"aria-label":s("menu.close")},e.createElement(o,{icon:u})))};export{E as B};
|
|
2
2
|
//# sourceMappingURL=BubbleToolbar.js.map
|
package/BuilderBar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
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{m as b}from"./userflow.js";import{a as D,D as N}from"./stylesheets.js";import"./vendor.html-parse-stringify2.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]="154a4719-afc9-4bf7-ad8c-db42f702d609",r._sentryDebugIdIdentifier="sentry-dbid-154a4719-afc9-4bf7-ad8c-db42f702d609")}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:m},y)=>{const{loaded:h}=D(window,_),[E,S]=t.useState(!1),o=h&&E,u=t.useRef(!1);t.useEffect(()=>{o&&!u.current&&r&&(u.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"},m,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
|
-
|
|
1
|
+
import{r as s,R as c}from"./vendor.react.js";import{q as b,p as R,o 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"./flow-condition-types.js";import{l as W}from"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.html-parse-stringify2.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"./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.date-fns.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]="9c76d2d4-d224-495f-ba12-03d9eda06ed6",t._sentryDebugIdIdentifier="sentry-dbid-9c76d2d4-d224-495f-ba12-03d9eda06ed6")}catch{}})();const G=new URL("checklist-launcher-frame.css",import.meta.url).href,K=({position:t,theme:e,onClick:l,onVisibleChange:o,buttonRef:a,text:u,uncompletedCount:r})=>{const d=t||"absolute",{i18n:n}=X(),m=n.dir(),{loaded:i}=A(window,D,e),[h,k]=s.useState(!1),f=i&&h;s.useEffect(()=>{o&&o(f)},[o,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===b.TOP_LEFT||p===b.TOP_RIGHT,g=p===b.TOP_LEFT||p===b.BOTTOM_LEFT,T={zIndex:d==="fixed"?e.checklistZIndex!=null?e.checklistZIndex: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:k,title:"Checklist launcher"},c.createElement("button",{ref:a,className:"userflowjs-checklist-launcher-frame-root",onClick:l},c.createElement("div",{ref:S,className:"userflowjs-checklist-launcher-content"},c.createElement("div",{className:"userflowjs-checklist-launcher-text"},u||"Get Started"),c.createElement("div",{"data-testid":"checklist-launcher-uncompleted-count",className:"userflowjs-checklist-launcher-uncompleted-count"},r===0?c.createElement(H,{icon:W}):r,c.createElement("div",{className:"userflowjs-a11y-only"},"uncompleted tasks")))))},xe=({session:t,checklistExpanded:e})=>{const{version:l}=t,o=l.checklist,a=t.locale?t.locale.standardLocaleId:t.version.theme.languageId;s.useEffect(()=>{N.changeLanguage(a)},[a]);const[u,r]=s.useState(!1);return e?c.createElement(q,{session:t,initialAutoFocus:u,setInitialAutoFocus:r}):o.launcherEnabled?c.createElement(V,{session:t,initialAutoFocus:u,setInitialAutoFocus:r}):null},q=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const o=C(),[a,u]=s.useState(null),{version:r}=t,d=r.checklist,n=I(r.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=k=>{k.key==="Escape"&&(l(!0),o.hideChecklist())};return i.addEventListener("keydown",h),()=>i.removeEventListener("keydown",h)},[a,l,o]),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),o.hideChecklist()}}))))},V=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const o=C(),[a,u]=s.useState(!1),[r,d]=s.useState(null),{version:n}=t,m=n.checklist,i=I(n.theme);return s.useEffect(()=>{!a||!r||!e||r.focus()},[o,r,a,e]),c.createElement(K,{position:"fixed",theme:i,onClick:h=>{l(h.detail===0),o.showChecklist()},onVisibleChange:u,buttonRef:d,text:m.launcherText,uncompletedCount:B(t)})};export{xe as ChecklistApp,xe as default};
|
|
2
2
|
//# sourceMappingURL=ChecklistApp.js.map
|
package/ChecklistUI.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import{R as e,r as a}from"./vendor.react.js";import{E as R,m as I}from"./userflow.js";import{u as v}from"./client-context.js";import"./vendor.html-parse-stringify2.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{b 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:{},n=new Error().stack;n&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[n]="cd8723a2-c7f1-44b2-a5bc-ce84210de4db",t._sentryDebugIdIdentifier="sentry-dbid-cd8723a2-c7f1-44b2-a5bc-ce84210de4db")}catch{}})();const $=e.forwardRef(({elProps:t,onClick:n,onCheckmarkClick:o,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:n?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":!!n,"userflowjs-bubble-task--active":!!d}),onClick:n,...r},e.createElement("div",{className:"userflowjs-bubble-task__checkmark",onClick:o},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:n})=>{const o=v(),{session:s}=S(),i=s.version.checklist,[c,b]=a.useState(()=>o.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&&o.ackCompletedTask(t.cvid)},[o,r,t.cvid]);const u=i.completeInOrder&&!n,w=u||t.actions.length===0&&r?void 0:()=>{o.send({kind:"ClickChecklistTask",sessionId:s.id,taskCvid:t.cvid},{batch:!0}),t.actions.length>0&&(r||!t.completesOnClick)&&o.hideChecklist(),L(o,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:n})=>{const o=n===0?0:Math.min(100,Math.round(t/n*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"},o,"%")),e.createElement("div",{className:"userflowjs-bubble-checklist-progress-fill",style:{width:`${o}%`}},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},o,"%")))},J=()=>{const{t}=D(),n=v(),o=S(),{session:s}=o,{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=o.currentSectionName,g=!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),g=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||g},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?n.endFlow(s,{endReason:R.USER_CLOSED}):b({kind:"showClose"})},t("checklistDismiss.button"))))},K=()=>{const{t}=D(),n=v(),{dispatch:o}=q(),{session:s}=S();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:()=>n.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:()=>o({kind:"showFlow"})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},t("checklistDismiss.cancel")))))};function Q(t){const n=t?.querySelector(".userflowjs-bubble-task--clickable:not(.userflowjs-bubble-task--completed)")||t?.querySelector(".userflowjs-bubble-task--clickable")||t?.querySelector('button:not([tabIndex="-1"])');n&&typeof n.focus=="function"&&n.focus()}const re=({session:t,initialAutoFocus:n})=>{const o=v(),s=a.useRef(null),[i,c]=a.useReducer(W,void 0,()=>({...V,session:t,currentSectionName:I.getItem("currentChecklistSectionName:"+t.id),autoFocusRequested:!!n})),{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"})},[o,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,n){switch(n.kind){case"updateSession":return{...t,session:n.session};case"showFlow":return{...t,contentType:"flow",autoFocusRequested:!0};case"showClose":return{...t,contentType:"close",autoFocusRequested:!0};case"setCurrentSection":return{...t,currentSectionName:n.sectionName};case"autoFocused":return{...t,autoFocusRequested:!1}}}const T=a.createContext(null),_=a.createContext(null);function q(){return a.useContext(T)}function S(){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
|
-
|
|
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,g as ne,a as oe,o as fe,c as $,i as ae,d as pe,e as ge,h as re,j as we,k as C}from"./flow-condition-types.js";import{j 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.html-parse-stringify2.js";import"./vendor.object-assign.js";import"./vendor.date-fns.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"./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]="8333d2c4-a681-43ef-8e94-143a015395b4",p._sentryDebugIdIdentifier="sentry-dbid-8333d2c4-a681-43ef-8e94-143a015395b4")}catch{}})();const ye=_("alt+s"),Ee=_("escape"),Re=_("u"),qe=({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{qe as ElementSelectionApp,qe as default};
|
|
2
2
|
//# sourceMappingURL=ElementSelectionApp.js.map
|
package/FlowApp.js
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t=(new Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="948c9e7c-4187-4595-8af9-811321df036d",e._sentryDebugIdIdentifier="sentry-dbid-948c9e7c-4187-4595-8af9-811321df036d")}catch(E){}}();import{r as e}from"./vendor.react.js";import{E as t,V as E,J as s,b as o,K as n,H as r,L as T,x as l,D as a,M as i,U as N}from"./userflow.js";import{u as c}from"./vendor.react-i18next.js";import{B as u}from"./BubbleToolbar.js";import{m as A,d as R,R as S,i as O,g as d,u as I,c as L,h as C,S as _}from"./bubble-frame.styl.js";import{b as D,z as p,a as m,t as f,r as b}from"./flow-condition-types.js";import{u as U,i as M}from"./client-context.js";import{F as P}from"./FlowChrome.js";import{u as g,r as B}from"./use-selector-element-monitoring.js";import{a as h,S as w}from"./flow-host.styl.js";import{m as v}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as H,u as G}from"./stylesheets.js";import{T as F}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";const V=()=>{const{t:E}=c(),s=U(),{dispatch:o,restart:n}=ps(),{session:r,step:T}=ms(),l="userflowjs-bubble-button userflowjs-bubble-button--default userflowjs-bubble-menu__item";return e.createElement("div",{role:"dialog","aria-modal":Cs(T)?"true":void 0,"aria-label":"Guide menu"},e.createElement("div",{className:"userflowjs-bubble-menu__title"},E("menu.title")),e.createElement("button",{className:l,onClick:()=>s.endFlow(r,{endReason:t.USER_CLOSED})},E("menu.close")),r.version.restartEnabled&&e.createElement("button",{className:l,onClick:n},E("menu.restart")),e.createElement("button",{className:l,onClick:()=>o({kind:"showFlow"})},E("menu.back")))},y=({progress:t,type:E,position:s,totalSteps:o})=>{const{t:n}=c(),r=parseFloat(t||"0"),T={width:100*r+"%"},l="DEFAULT"===E?"TOP":s,a=`userflowjs-bubble-progress-${E||"DEFAULT"}`,i="BOTTOM"===l?" userflowjs-bubble-progress-bottom":"",N=["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED","NARROW"].includes(E)?`userflowjs-bubble-progress-CHAINED ${"CHAINED_SQUARED"===E?"userflowjs-bubble-progress-CHAINED_SQUARED":"CHAINED_ROUNDED"===E?"userflowjs-bubble-progress-CHAINED_ROUNDED":"DOTTED"===E?"userflowjs-bubble-progress-DOTTED":"userflowjs-bubble-progress-NARROW"}${i}`:`${a}${i}`,u="NUMBERED"===E?3:o||0,A=Math.min(Math.floor(r*u),u);return e.createElement("div",null,["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED"].includes(E)&&e.createElement("div",{className:N},Array.from({length:3}).map(((t,E)=>e.createElement("div",{key:E,className:"rounded "+(E<Math.floor(3*r)?"completed":"")})))),"NARROW"===E&&e.createElement("div",{className:N},e.createElement("div",{className:"linear-progress-bar"},e.createElement("div",{className:"linear-progress-fill",style:T}))),"NUMBERED"===E&&e.createElement("div",{className:N},e.createElement("span",{className:"numbered-progress"},n("of",{replace:{range:u,selected:A}}))),!["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED","NARROW","NUMBERED"].includes(E)&&e.createElement("div",{className:`${N} ${"BOTTOM"===l?"bottom":""}`},e.createElement("div",{className:"userflowjs-bubble-progress__fill",style:T})))};var W,k,j,Y,K,x,X,Q,q,Z,$,z,J,ee,te,Ee,se,oe,ne,re,Te,le,ae,ie,Ne,ce,ue,Ae,Re,Se,Oe,de,Ie,Le,Ce,_e,De,pe,me,fe,be,Ue,Me,Pe,ge,Be,he,we,ve,He,Ge,Fe,Ve,ye,We,ke,je,Ye,Ke,xe,Xe,Qe,qe,Ze,$e,ze,Je,et,tt,Et,st,ot,nt,rt,Tt,lt,at,it,Nt,ct,ut,At,Rt,St,Ot,dt,It,Lt,Ct,_t,Dt,pt,mt,ft,bt,Ut,Mt,Pt,gt,Bt,ht,wt,vt,Ht,Gt,Ft,Vt,yt,Wt,kt,jt,Yt,Kt,xt,Xt,Qt,qt,Zt,$t,zt,Jt,eE,tE,EE,sE,oE,nE,rE,TE,lE,aE,iE,NE,cE,uE,AE,RE,SE,OE,dE,IE,LE,CE,_E,DE,pE,mE,fE,bE,UE,ME,PE,gE,BE,hE,wE,vE,HE,GE,FE,VE,yE,WE,kE,jE,YE,KE,xE,XE,QE,qE,ZE,$E,zE,JE,es,ts,Es,ss,os;(k=W||(W={})).UNIQUE_ACTIVATION_RATE="UNIQUE_ACTIVATION_RATE",k.UNIQUE_COMPLETION_RATE="UNIQUE_COMPLETION_RATE",k.UNIQUE_VIEWS="UNIQUE_VIEWS",(Y=j||(j={})).BADGE="BADGE",Y.POPOUT="POPOUT",Y.SILENT="SILENT",(K||(K={})).SEEN_AT="SEEN_AT",(X=x||(x={})).DAILY="DAILY",X.WEEKLY="WEEKLY",(q=Q||(Q={})).MATCH="MATCH",q.STRICT="STRICT",($=Z||(Z={})).CANCELED="CANCELED",$.CRAWLING="CRAWLING",$.FAILED="FAILED",$.READY="READY",(J=z||(z={})).DISLIKE="DISLIKE",J.LIKE="LIKE",(te=ee||(ee={})).LIKE="LIKE",te.NONE="NONE",te.SCALE="SCALE",(se=Ee||(Ee={})).DEEP="DEEP",se.SITEMAP="SITEMAP",(ne=oe||(oe={})).HOST="HOST",ne.PATH="PATH",(Te=re||(re={})).INTEGRATION="INTEGRATION",Te.TEXT="TEXT",Te.WEB="WEB",(ae=le||(le={})).BOOLEAN="BOOLEAN",ae.CHECKLIST_TASK="CHECKLIST_TASK",ae.DATETIME="DATETIME",ae.FLOW="FLOW",ae.FLOW_SESSION="FLOW_SESSION",ae.FLOW_STEP="FLOW_STEP",ae.FLOW_VERSION="FLOW_VERSION",ae.LIST="LIST",ae.NUMBER="NUMBER",ae.RANDOM_AB="RANDOM_AB",ae.RANDOM_NUMBER="RANDOM_NUMBER",ae.STRING="STRING",(Ne=ie||(ie={})).EVENT="EVENT",Ne.GROUP="GROUP",Ne.GROUP_MEMBERSHIP="GROUP_MEMBERSHIP",Ne.USER="USER",(ue=ce||(ce={})).ASSET="ASSET",ue.CARTOON="CARTOON",ue.NONE="NONE",ue.URL="URL",(Re=Ae||(Ae={})).INSIDE="INSIDE",Re.OUTSIDE="OUTSIDE",(Oe=Se||(Se={})).HIGHLIGHT="HIGHLIGHT",Oe.HIGHLIGHT_MODAL="HIGHLIGHT_MODAL",Oe.MODAL="MODAL",(Ie=de||(de={})).CENTER="CENTER",Ie.SPACE_BETWEEN="SPACE_BETWEEN",Ie.START="START",(Ce=Le||(Le={})).BODY_FIRST="BODY_FIRST",Ce.BODY_LAST="BODY_LAST",Ce.ELEMENT_AFTER="ELEMENT_AFTER",Ce.ELEMENT_BEFORE="ELEMENT_BEFORE",Ce.ELEMENT_FIRST="ELEMENT_FIRST",Ce.ELEMENT_LAST="ELEMENT_LAST",(De=_e||(_e={})).MONTH="MONTH",De.YEAR="YEAR",(me=pe||(pe={})).BOTTOM_CENTER="BOTTOM_CENTER",me.BOTTOM_LEFT="BOTTOM_LEFT",me.BOTTOM_RIGHT="BOTTOM_RIGHT",me.CENTER="CENTER",me.TOP_CENTER="TOP_CENTER",me.TOP_LEFT="TOP_LEFT",me.TOP_RIGHT="TOP_RIGHT",(be=fe||(fe={})).CRISP="CRISP",be.CUSTOM="CUSTOM",be.FRESHCHAT="FRESHCHAT",be.HELPSCOUT="HELPSCOUT",be.HUBSPOT="HUBSPOT",be.INTERCOM="INTERCOM",be.ZENDESK="ZENDESK",be.ZENDESK_MESSENGER="ZENDESK_MESSENGER",(Me=Ue||(Ue={})).ADVANCED_INTEGRATIONS_ENABLED="ADVANCED_INTEGRATIONS_ENABLED",Me.ALERTING_ENABLED="ALERTING_ENABLED",Me.CUSTOM_CSS_ENABLED="CUSTOM_CSS_ENABLED",Me.DASHBOARD_ANALYTICS_ENABLED="DASHBOARD_ANALYTICS_ENABLED",Me.GROUPS_ENABLED="GROUPS_ENABLED",Me.SURVEYS_ENABLED="SURVEYS_ENABLED",(ge=Pe||(Pe={})).ANNOUNCEMENTS_PER_COMPANY="ANNOUNCEMENTS_PER_COMPANY",ge.ASSISTANT_MESSAGES_PER_MONTH="ASSISTANT_MESSAGES_PER_MONTH",ge.BANNERS_PER_COMPANY="BANNERS_PER_COMPANY",ge.CHECKLISTS_PER_COMPANY="CHECKLISTS_PER_COMPANY",ge.ENVS_PER_COMPANY="ENVS_PER_COMPANY",ge.FLOWS_PER_COMPANY="FLOWS_PER_COMPANY",ge.LAUNCHERS_PER_COMPANY="LAUNCHERS_PER_COMPANY",ge.LOCALES_PER_COMPANY="LOCALES_PER_COMPANY",ge.MAU="MAU",ge.MEMBERS_PER_COMPANY="MEMBERS_PER_COMPANY",ge.QUESTIONS_PER_COMPANY="QUESTIONS_PER_COMPANY",ge.RESOURCE_CENTERS_PER_COMPANY="RESOURCE_CENTERS_PER_COMPANY",ge.TRACKERS_PER_COMPANY="TRACKERS_PER_COMPANY",(he=Be||(Be={})).ADMIN="ADMIN",he.VIEWER="VIEWER",(ve=we||(we={})).ADMIN="ADMIN",ve.OWNER="OWNER",ve.VIEWER="VIEWER",(Ge=He||(He={})).CENTER="CENTER",Ge.END="END",Ge.START="START",(Ve=Fe||(Fe={})).AUTO="AUTO",Ve.BOTTOM="BOTTOM",Ve.LEFT="LEFT",Ve.RIGHT="RIGHT",Ve.TOP="TOP",(We=ye||(ye={})).PERCENT="PERCENT",We.PX="PX",(je=ke||(ke={})).DUPLICATE="DUPLICATE",je.EXPIRED="EXPIRED",je.NOT_FOUND="NOT_FOUND",je.OK="OK",(Ke=Ye||(Ye={})).ATTRIBUTE="ATTRIBUTE",Ke.CLAUSE="CLAUSE",Ke.PAGE="PAGE",Ke.SEGMENT="SEGMENT",(Xe=xe||(xe={})).ADD="ADD",Xe.APPEND="APPEND",Xe.PREPEND="PREPEND",Xe.REMOVE="REMOVE",Xe.SET="SET",Xe.SET_DATETIME="SET_DATETIME",Xe.SET_DATETIME_ONCE="SET_DATETIME_ONCE",Xe.SET_ONCE="SET_ONCE",Xe.SUBTRACT="SUBTRACT",Xe.UNSET="UNSET",(qe=Qe||(Qe={})).NEW_TAB="NEW_TAB",qe.SAME_TAB="SAME_TAB",($e=Ze||(Ze={})).CLOSE_FLOW="CLOSE_FLOW",$e.EVAL_JS="EVAL_JS",$e.GO_TO_STEP="GO_TO_STEP",$e.NAVIGATE="NAVIGATE",$e.SET_ATTRIBUTE="SET_ATTRIBUTE",$e.SNOOZE="SNOOZE",$e.START_FLOW="START_FLOW",(Je=ze||(ze={})).BROWSER="BROWSER",Je.ELECTRON="ELECTRON",(tt=et||(et={})).CLICK="CLICK",tt.DISABLED="DISABLED",tt.MOUSEDOWN="MOUSEDOWN",tt.NOT_CLICK="NOT_CLICK",tt.NOT_DISABLED="NOT_DISABLED",tt.NOT_PRESENT="NOT_PRESENT",tt.PRESENT="PRESENT",(st=Et||(Et={})).CURRENT_GROUP="CURRENT_GROUP",st.CURRENT_USER="CURRENT_USER",st.CURRENT_USER_CURRENT_GROUP="CURRENT_USER_CURRENT_GROUP",(nt=ot||(ot={})).BETWEEN="BETWEEN",nt.EQ="EQ",nt.GTE="GTE",nt.LTE="LTE",(Tt=rt||(rt={})).ANY="ANY",Tt.RELATIVE_BETWEEN="RELATIVE_BETWEEN",Tt.RELATIVE_GT="RELATIVE_GT",Tt.RELATIVE_LT="RELATIVE_LT",(at=lt||(lt={})).ACTIVE="ACTIVE",at.COMPLETED="COMPLETED",at.NOT_ACTIVE="NOT_ACTIVE",at.NOT_COMPLETED="NOT_COMPLETED",at.NOT_SEEN="NOT_SEEN",at.SEEN="SEEN",(Nt=it||(it={})).ABSOLUTE_EQ="ABSOLUTE_EQ",Nt.ABSOLUTE_GT="ABSOLUTE_GT",Nt.ABSOLUTE_LT="ABSOLUTE_LT",Nt.AND="AND",Nt.BETWEEN="BETWEEN",Nt.CONTAINS="CONTAINS",Nt.EMPTY="EMPTY",Nt.ENDS_WITH="ENDS_WITH",Nt.EQ="EQ",Nt.EXCLUDES_ALL="EXCLUDES_ALL",Nt.EXCLUDES_ANY="EXCLUDES_ANY",Nt.FALSE="FALSE",Nt.GT="GT",Nt.GTE="GTE",Nt.INCLUDES_ALL="INCLUDES_ALL",Nt.INCLUDES_ANY="INCLUDES_ANY",Nt.LT="LT",Nt.LTE="LTE",Nt.NE="NE",Nt.NOT_CONTAINS="NOT_CONTAINS",Nt.NOT_EMPTY="NOT_EMPTY",Nt.NOT_REGEX="NOT_REGEX",Nt.OR="OR",Nt.REGEX="REGEX",Nt.RELATIVE_EQ="RELATIVE_EQ",Nt.RELATIVE_GT="RELATIVE_GT",Nt.RELATIVE_LT="RELATIVE_LT",Nt.STARTS_WITH="STARTS_WITH",Nt.TRUE="TRUE",Nt.URL="URL",(ut=ct||(ct={})).ALWAYS_TRUE="ALWAYS_TRUE",ut.ATTRIBUTE="ATTRIBUTE",ut.CHECKLIST_TASK_CLICKED="CHECKLIST_TASK_CLICKED",ut.CLAUSE="CLAUSE",ut.ELEMENT="ELEMENT",ut.EVENT="EVENT",ut.FILLED_IN_INPUT="FILLED_IN_INPUT",ut.FLOW="FLOW",ut.INPUT_VALUE="INPUT_VALUE",ut.PAGE="PAGE",ut.SEGMENT="SEGMENT",ut.TIME="TIME",(Rt=At||(At={})).ANNOUNCEMENT_TIME="ANNOUNCEMENT_TIME",Rt.EDITED_AT="EDITED_AT",Rt.NAME="NAME",(Ot=St||(St={})).MULTILINE_TEXT="MULTILINE_TEXT",Ot.MULTIPLE_CHOICE="MULTIPLE_CHOICE",Ot.NPS="NPS",Ot.SCALE="SCALE",Ot.STARS="STARS",Ot.TEXT="TEXT",(dt||(dt={})).INPUT="INPUT",(Lt=It||(It={})).AUTO="AUTO",Lt.MANUAL="MANUAL",(_t=Ct||(Ct={})).LIST="LIST",_t.NUMBER="NUMBER",_t.TEXT="TEXT",(pt=Dt||(Dt={})).ACTION="ACTION",pt.ADMIN_ENDED="ADMIN_ENDED",pt.LAUNCHER_DEACTIVATED="LAUNCHER_DEACTIVATED",pt.REPLACED="REPLACED",pt.SNOOZED="SNOOZED",pt.TOOLTIP_TARGET_MISSING="TOOLTIP_TARGET_MISSING",pt.UNPUBLISHED="UNPUBLISHED",pt.USER_CLOSED="USER_CLOSED",pt.USERFLOWJS="USERFLOWJS",(ft=mt||(mt={})).ACTION="ACTION",ft.BANNER_SEEN="BANNER_SEEN",ft.DRAFT="DRAFT",ft.LAUNCHER_SEEN="LAUNCHER_SEEN",ft.LINK="LINK",ft.RESOURCE_CENTER="RESOURCE_CENTER",ft.RESOURCE_CENTER_MATCHED="RESOURCE_CENTER_MATCHED",ft.SNOOZE_ENDED="SNOOZE_ENDED",ft.START_CONDITION="START_CONDITION",ft.USERFLOWJS="USERFLOWJS",(Ut=bt||(bt={})).ACTIVE="ACTIVE",Ut.ENDED="ENDED",(Pt=Mt||(Mt={})).ALWAYS="ALWAYS",Pt.MULTIPLE="MULTIPLE",Pt.NEVER="NEVER",Pt.ONCE="ONCE",Pt.ONCE_PER_GROUP="ONCE_PER_GROUP",(Bt=gt||(gt={})).BUBBLE="BUBBLE",Bt.HIDDEN="HIDDEN",Bt.MODAL="MODAL",Bt.TOOLTIP="TOOLTIP",(wt=ht||(ht={})).DAY="DAY",wt.HOUR="HOUR",wt.MINUTE="MINUTE",wt.SECOND="SECOND",(Ht=vt||(vt={})).CHANGED="CHANGED",Ht.INVALID="INVALID",Ht.MISSING="MISSING",Ht.OK="OK",(Ft=Gt||(Gt={})).IMAGE="IMAGE",Ft.LIQUID="LIQUID",Ft.SELECTOR_TEXT="SELECTOR_TEXT",Ft.STRING="STRING",Ft.TREE_DOC_TEXT="TREE_DOC_TEXT",(yt=Vt||(Vt={})).ANNOUNCEMENT="ANNOUNCEMENT",yt.ASSISTANT="ASSISTANT",yt.BANNER="BANNER",yt.CHECKLIST="CHECKLIST",yt.FLOW="FLOW",yt.LAUNCHER="LAUNCHER",yt.RESOURCE_CENTER="RESOURCE_CENTER",yt.TRACKER="TRACKER",(kt=Wt||(Wt={})).DISMISS="DISMISS",kt.DISMISS_FIRST_MENU_AFTER="DISMISS_FIRST_MENU_AFTER",(Yt=jt||(jt={})).GOOGLE="GOOGLE",Yt.STANDARD="STANDARD",(xt=Kt||(Kt={})).ACTIVE="ACTIVE",xt.HIDDEN="HIDDEN",(Qt=Xt||(Xt={})).TO_PROVIDER="TO_PROVIDER",Qt.TO_USERFLOW="TO_USERFLOW",(Zt=qt||(qt={})).ABORTED="ABORTED",Zt.COMPLETED="COMPLETED",Zt.FAILED="FAILED",Zt.RUNNING="RUNNING",(zt=$t||($t={})).ASSISTANT="ASSISTANT",zt.FRESHDESK="FRESHDESK",zt.HUBSPOT="HUBSPOT",zt.INTEGRATION="INTEGRATION",zt.WEB="WEB",zt.ZENDESK="ZENDESK",(eE=Jt||(Jt={})).LAUNCHER_CLICK="LAUNCHER_CLICK",eE.LAUNCHER_HOVER="LAUNCHER_HOVER",eE.LAUNCHER_TARGET_CLICK="LAUNCHER_TARGET_CLICK",eE.LAUNCHER_TARGET_HOVER="LAUNCHER_TARGET_HOVER",eE.TARGET_CLICK="TARGET_CLICK",eE.TARGET_HOVER="TARGET_HOVER",(EE=tE||(tE={})).BEACON="BEACON",EE.BUTTON="BUTTON",EE.HIDDEN="HIDDEN",EE.ICON="ICON",(oE=sE||(sE={})).DEACTIVATE="DEACTIVATE",oE.NEVER="NEVER",(rE=nE||(nE={})).LAUNCHER="LAUNCHER",rE.TARGET="TARGET",(lE=TE||(TE={})).DISMISS="DISMISS",lE.NONE="NONE",(iE=aE||(aE={})).BEAMER="BEAMER",iE.GOOGLE="GOOGLE",(cE=NE||(NE={})).ASC="ASC",cE.DESC="DESC",(AE=uE||(uE={})).CARD="CARD",AE.INVOICE="INVOICE",(SE=RE||(RE={})).BOTTOM="BOTTOM",SE.TOP="TOP",(dE=OE||(OE={})).CHAINED_ROUNDED="CHAINED_ROUNDED",dE.CHAINED_SQUARED="CHAINED_SQUARED",dE.DEFAULT="DEFAULT",dE.DOTTED="DOTTED",dE.NARROW="NARROW",dE.NUMBERED="NUMBERED",(LE=IE||(IE={})).BUTTON="BUTTON",LE.INPUT="INPUT",(_E=CE||(CE={})).CHAT="CHAT",_E.EMAIL="EMAIL",_E.PHONE="PHONE",(pE=DE||(DE={})).ACTION="ACTION",pE.ANNOUNCEMENTS="ANNOUNCEMENTS",pE.ASSISTANT="ASSISTANT",pE.CHECKLIST="CHECKLIST",pE.CONTACT="CONTACT",pE.DIVIDER="DIVIDER",pE.FLOWS="FLOWS",pE.KNOWLEDGE_BASE="KNOWLEDGE_BASE",pE.MESSAGE="MESSAGE",pE.SUBPAGE="SUBPAGE",(fE=mE||(mE={})).CUSTOM="CUSTOM",fE.DEFAULT="DEFAULT",fE.PLAINTEXT="PLAINTEXT",(UE=bE||(bE={})).CHECKLIST_OVERRIDE="CHECKLIST_OVERRIDE",UE.NONE="NONE",UE.RESOURCE_CENTER_ONLY="RESOURCE_CENTER_ONLY",(PE=ME||(ME={})).ALL="ALL",PE.CONDITION="CONDITION",PE.INTEGRATION="INTEGRATION",PE.MANUAL="MANUAL",(BE=gE||(gE={})).CONDITION="CONDITION",BE.MANUAL="MANUAL",(wE=hE||(hE={})).END_USER="END_USER",wE.GROUP="GROUP",(HE=vE||(vE={})).DAY="DAY",HE.MONTH="MONTH",HE.WEEK="WEEK",(FE=GE||(GE={})).ACTIVE="ACTIVE",FE.CLOSED="CLOSED",FE.TRIALING="TRIALING",(yE=VE||(VE={})).FEMALE="FEMALE",yE.MALE="MALE",(kE=WE||(WE={})).COMPACT="COMPACT",kE.FULL="FULL",(YE=jE||(jE={})).BUBBLE="BUBBLE",YE.END="END",YE.ERROR="ERROR",YE.FLAG="FLAG",(xE=KE||(KE={})).ABOVE="ABOVE",xE.BELOW="BELOW",xE.LEFT="LEFT",xE.RIGHT="RIGHT",(QE=XE||(XE={})).EVENTS="EVENTS",QE.FIRST_TRACKED_AT="FIRST_TRACKED_AT",QE.LAST_TRACKED_AT="LAST_TRACKED_AT",(ZE=qE||(qE={})).CSV="CSV",ZE.XLIFF="XLIFF",(zE=$E||($E={})).EMAIL="EMAIL",zE.ID="ID",(es=JE||(JE={})).ADD="ADD",es.REMOVE="REMOVE",es.RESET="RESET",(Es=ts||(ts={})).PRIVATE="PRIVATE",Es.PUBLIC_READ="PUBLIC_READ",(os=ss||(ss={})).MANUAL="MANUAL",os.NONE="NONE",os.SYNTHETIC="SYNTHETIC";const ns=({theme:o})=>{const n=U(),{session:r,step:T,muted:l,shouldLabelDialog:a}=ms(),{version:i}=r,{dispatch:N}=ps(),c=i.steps[0],O=c&&c.id===T.id,d=O&&"1"===T.progress,I=e.useMemo((()=>T.content&&A(R(T.content),{buttons:T.buttons,questions:T.questions})),[T.content,T.buttons,T.questions]),L=i.steps.findIndex((e=>e.id===T.id)),C=i.steps.length,_=C>0?((L+1)/C).toString():"0";return e.createElement("div",{key:T.id,role:"alertdialog","aria-modal":Cs(T)?"true":void 0,"aria-label":a?"Guide":void 0},!d&&"TOP"===o.progressBarPosition&&o.progressBarEnabled&&e.createElement(y,{progress:_,type:o.progressBarType,totalSteps:i.steps.length}),e.createElement("div",{id:"userflowjs-bubble-content",className:"userflowjs-bubble-content"},e.createElement(S,{doc:I,lookupAttribute:D(r.data),buttons:T.buttons,questions:T.questions})),e.createElement(u,{draftMode:r.draftMode,muted:l,toggleMuted:o.voiceType!==E.NONE?()=>N({kind:"toggleMuted"}):void 0,close:i.closeDisabled?void 0:()=>o.flowXButtonBehavior===s.DISMISS||O?n.endFlow(r,{endReason:t.USER_CLOSED}):N({kind:"showMenu"})}),!d&&"BOTTOM"===o.progressBarPosition&&o.progressBarEnabled&&e.createElement(y,{progress:_,type:o.progressBarType,position:RE.BOTTOM,totalSteps:i.steps.length}))};function rs(e,t){if(!e)return"";"string"==typeof e&&(e=R(e));const E=[],s=/[.!?;,]$/;function o(){const e=(E[E.length-1]||"").trim();e&&!e.match(s)&&E.push(".")}function n(e){e.forEach((e=>function(e){if(O(e)){if(e.text&&!e.silent){const t=e.text.split("\n");t.forEach(((e,s)=>{E.push(e),s<t.length-1&&(o(),E.push("\n"))}))}}else switch(e.type){case"attribute":{const s=d(e,t);s&&E.push(s);break}default:n(e.children),["link"].includes(e.type)||(o(),E.push("\n\n"))}}(e)))}return n(e.children),E.join("").trim().replace(new RegExp(String.fromCharCode(160),"g")," ").replace(new RegExp(String.fromCharCode(8),"g"),"")}const Ts=({bubbleFrame:t,theme:s})=>{const o=U(),{dispatch:n}=ps(),{muted:r,session:T,step:l}=ms(),a=o.getAudio();e.useEffect((()=>{const e=()=>{n({kind:"speechPlaying"})},t=()=>{n({kind:"speechStopped"})};return a.addEventListener("playing",e),a.addEventListener("ended",t),a.addEventListener("pause",t),()=>{a.removeEventListener("playing",e),a.removeEventListener("ended",t),a.removeEventListener("pause",t),a.pause(),a.src="",n({kind:"speechStopped"})}}),[n,a]),e.useEffect((()=>{if(o.audioReady)return;const e=t&&"IFRAME"===t.tagName?t.contentWindow:null;const E=()=>{window.removeEventListener("mousedown",s),e&&e.removeEventListener("mousedown",s)},s=()=>{E(),o.playAudio(null)};return window.addEventListener("mousedown",s),e&&e.addEventListener("mousedown",s),E}),[t,o]);const i=e.useRef(T),N=e.useRef(s),c=e.useRef(l);return e.useEffect((()=>{i.current=T,N.current=s,c.current=l}),[T,s,l]),e.useEffect((()=>{if(!o.audioReady||r)return void o.pauseAudio();let e=!1;return(async()=>{if(await new Promise((e=>setTimeout(e,1))),e)return;const t=await async function(e,t,s,o){if(s.voiceType===E.SYNTHETIC&&"string"==typeof s.syntheticVoice&&o.content){e.ensureIdentified();const E=D(t.data),n=rs(o.content,E);return e.getStepSpeech(s.syntheticVoice,n)}if(s.voiceType===E.MANUAL&&o.speechAsset)return o.speechAsset.assetUrl;return null}(o,i.current,N.current,c.current);e||t&&o.playAudio(t)})(),()=>{e=!0}}),[r,o,l.id,s.voiceType,s.syntheticVoice]),null};const ls=e.forwardRef(((t,E)=>{const s=h();return e.createElement("div",{ref:E,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:s+2}},e.createElement(H,{icon:v}))}));function as(e,t){const E=e.current;E&&(E.classList.toggle("userflowjs-out-of-viewport-pointer--visible",null!=t),t&&(E.style.left=t.left+"px",E.style.top=t.top+"px",E.classList.toggle("userflowjs-out-of-viewport-pointer--visible-up","up"===t.direction),E.classList.toggle("userflowjs-out-of-viewport-pointer--visible-down","down"===t.direction)))}const is=({theme:t})=>{const{step:E}=ms();return e.createElement(e.Fragment,null,E.beacons.map((E=>e.createElement(Ns,{key:E.id,beacon:E,theme:t}))))},Ns=({beacon:t,theme:E})=>{const{session:s}=ms(),o=h(),n=e.useRef(null),r=e.useRef(null),T=I(t.hiddenCondition),l=e.useMemo((()=>f(t.selector,s.data)),[t.selector,s.data]),a=e.useCallback((({targetRect:e,clipEl:s,viewportClipRect:o})=>{const T=function({beacon:e,beaconRef:t,clipEl:E,viewportClipRect:s,targetRect:o,theme:n}){if(!t.current)return null;if(0===o.width||0===o.height)return null;const r=n.beaconSize,T=n.beaconSize,l=b(E);let a=0,i=0;switch(e.placement){case"top-left":case"left":case"bottom-left":a=o.left;break;case"top":case"center":case"bottom":a=o.left+o.width/2;break;default:a=o.left+o.width}switch(e.placement){case"left":case"center":case"right":i=o.top+o.height/2;break;case"bottom-left":case"bottom":case"bottom-right":i=o.top+o.height;break;default:i=o.top}a-=r/2,i-=T/2,a+=e.offsetX,i+=e.offsetY,a=Math.max(a,l.left-(E===document.documentElement?0:E.scrollLeft)),i=Math.max(i,l.top-(E===document.documentElement?0:E.scrollTop));const N=a+r,c=i+T,u=Math.min(32,.5*T);let A;A=c<s.top+u?"up":i>s.bottom-u?"down":null;return{top:i,right:N,bottom:c,left:a,width:r,height:T,pointerSubjectPosition:{direction:A,left:a,width:r},visible:null==A}}({beacon:t,beaconRef:n,clipEl:s,viewportClipRect:o,targetRect:e,theme:E}),l=T&&function({subjectPosition:e,pointerRef:t,viewportClipRect:E}){const s=t.current;if(!s)return null;const o=s.getBoundingClientRect(),n=p(m());let r,T,l=e.direction;return null==l?null:("down"===l&&E.bottom<o.height/2?l="up":"up"===l&&E.top>n&&(l="down"),r=e.left+e.width/2-o.width/2,T="down"===l?E.bottom-o.height:E.top,{direction:l,left:r,top:T})}({subjectPosition:T.pointerSubjectPosition,pointerRef:r,viewportClipRect:o});B((()=>{cs(n,T),as(r,l)}))}),[t]),i=e.useCallback((()=>{cs(n,null),as(r,null)}),[]);return g({selector:T?null:l,targetMoved:a,targetLost:i}),e.createElement(e.Fragment,null,e.createElement("div",{ref:n,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:o+2}},e.createElement("div",{className:"userflowjs-beacon__ring"}),e.createElement("div",{className:"userflowjs-beacon__ring"})),e.createElement(ls,{ref:r}))};function cs(e,t){const E=e.current;E&&(E.classList.toggle("userflowjs-fixed-widget--visible",null!=t),t&&(E.style.transform=`translate3d(${t.left}px, ${t.top}px, 0)`,E.style.visibility=t.visible?"visible":"hidden"))}const us=()=>{const{t:E}=c(),s=U(),{restart:r}=ps(),{session:T,step:l}=ms(),a=l.theme||T.version.theme,i=l.selector,N=!i||i.type===o.AUTO&&!i.autoData,A=()=>s.endFlow(T,{endReason:t.USER_CLOSED});return e.createElement(e.Fragment,null,e.createElement(u,{draftMode:T.draftMode,close:A}),T.draftMode&&N?e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.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 ",e.createElement("b",null,"Step ",l.idx+1)," of"," ",e.createElement("b",null,T.flow.name),".")):T.draftMode&&a.tooltipMissingBehavior===n.END?e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.createElement("p",null,e.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",e.createElement("b",null,"Step ",l.idx+1)," of"," ",e.createElement("b",null,T.flow.name)," was not found within"," ",a.tooltipMissingToleranceSeconds," ",1===parseFloat(a.tooltipMissingToleranceSeconds)?"second":"seconds","."),e.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),e.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),e.createElement("p",null,"Read more in our"," ",e.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):e.createElement(e.Fragment,null,e.createElement("div",{className:"userflowjs-bubble-content"},T.draftMode&&e.createElement("div",{className:"userflowjs-bubble-alert p-like"},e.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",e.createElement("b",null,"Step ",l.idx+1)," of"," ",e.createElement("b",null,T.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),e.createElement("p",null,e.createElement("b",null,E("tooltipTargetMissing.line1"))),e.createElement("p",null,E("tooltipTargetMissing.line2"))),e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement(L,{appearance:"primary",onClick:r,text:E("menu.restart")}),e.createElement(L,{appearance:"default",onClick:A,text:E("menu.close")}))))},As=({session:E,checklistSession:s,resourceCenterEmbedsChecklist:o})=>{const N=U(),[c,u]=e.useState(!1),[A,R]=e.useState(null),[S,O]=e.useReducer(Os,void 0,(()=>{const e=E,t=ds(e);return{...Ss,session:e,step:t,muted:!!r.getItem("flowsMuted"),autoFocusRequested:Ls(t)}})),{session:d,step:I,speechPlaying:L,contentType:D}=S,{version:p}=d,m=Cs(I);let b=0;I.questions.some((e=>e.type===l.NPS))&&(b=420);const g=G(I.theme||p.theme),B=e.useMemo((()=>{let e=g.bubbleY;const t=s?.version.theme;return!o&&s&&t&&s.version.checklist?.launcherEnabled&&I.appearance===T.BUBBLE&&t.checklistLauncherPlacement===g.bubblePlacement&&(g.avatarType===a.NONE||t.checklistLauncherX<g.bubbleX+g.avatarSize)&&(e=Math.max(g.bubbleY,t.checklistLauncherY+t.checklistLauncherHeight+g.bubbleY)),{...g,bubbleWidth:Math.max(g.bubbleWidth,b),bubbleY:e}}),[o,s,I.appearance,g,b]);e.useEffect((()=>{d!==E&&O({kind:"updateSession",session:E});const e=e=>{e.session.id===d.id&&O({kind:"goToStep",stepId:e.step.id})};return N.on("gotostep",e),()=>{N.off("gotostep",e)}}),[N,d,E]);const h=e.useMemo((()=>({dispatch:O,restart:()=>{N.goToStep(d,Is(d)),O({kind:"showFlow"})}})),[N,O,d]),v=e.useMemo((()=>I.selector&&f(I.selector,d.data)),[I.selector,d.data]),H=e.useCallback((()=>{C(N,d,I.actions)}),[N,d,I.actions]);e.useEffect((()=>{S.muted?r.setItem("flowsMuted","true"):r.removeItem("flowsMuted")}),[S.muted]);const F=d.locale?d.locale.standardLocaleId:B.languageId;e.useEffect((()=>{M.changeLanguage(F)}),[F]);const[y,W]=e.useState(!1),k=e.useCallback((e=>{W(e),e&&N.send({kind:"ReportTooltipTargetMissing",sessionId:d.id,stepId:I.id}),e&&B.tooltipMissingBehavior===n.END&&!d.draftMode&&N.endFlow(d,{endReason:t.TOOLTIP_TARGET_MISSING})}),[N,d,I.id,B.tooltipMissingBehavior]);return e.useEffect((()=>{if(!c||!S.autoFocusRequested)return;N.originalActiveElement||N.originalActiveElement===A?.ownerDocument.defaultView?.frameElement||(N.originalActiveElement=document.activeElement);let e=A?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(e&&e.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const t=A?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");t&&(e=t)}e&&"function"==typeof e.focus&&e.focus({preventScroll:!0}),O({kind:"autoFocused"})}),[N,A,c,S.autoFocusRequested]),e.useEffect((()=>{const e=A?.ownerDocument.defaultView;if(!e)return;const t=()=>{O({kind:"focusOut"}),delete N.originalActiveElement},E=()=>{O({kind:"focusIn"})};return window.addEventListener("focusin",t),e.addEventListener("focusin",E),()=>{window.removeEventListener("focusin",t),e.removeEventListener("focusin",E)}}),[A,N]),e.useEffect((()=>{if(!m||!A)return;const e=A.ownerDocument.defaultView,E=e?e.document:document,s=e=>{if("Escape"!==e.key||p.closeDisabled){if("Tab"===e.key){const t=A.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),s=t[0],o=t[t.length-1],n=E.activeElement;e.shiftKey?n===s&&(e.preventDefault(),o.focus()):n===o&&(e.preventDefault(),s.focus())}}else N.endFlow(d,{endReason:t.USER_CLOSED})};return window.addEventListener("keydown",s),e?.addEventListener("keydown",s),()=>{window.removeEventListener("keydown",s),e?.removeEventListener("keydown",s)}}),[m,N,d,A,p.closeDisabled]),e.useEffect((()=>{if(S.scrollToTopRequested){if(A?.ownerDocument.defaultView?.frameElement){const e=A?.ownerDocument.body;e&&(e.scrollTop=0)}O({kind:"scrolledToTop"})}}),[S.scrollToTopRequested,A]),e.createElement(_s.Provider,{value:h},e.createElement(Ds.Provider,{value:S},e.createElement(_.Provider,{value:d},e.createElement(w,null,e.createElement(P,{company:d.flow.company,theme:B,position:"fixed",stepKey:I.crossVersionId,stepAppearance:I.appearance,width:I.width,backgroundImageUrl:"flow"===D&&!y&&I.backgroundAsset?I.backgroundAsset.assetUrl:null,tooltipSelector:v,tooltipPlacement:I.tooltipPlacement,backdrop:I.backdrop,tooltipTargetBlocked:I.tooltipTargetBlocked,backdropPadding:I.backdropPadding,onTooltipTargetClick:H,onTooltipTargetMissingChange:k,onModalBackdropClick:I.appearance!==T.MODAL||B.modalBackdropOnclick!==i.DISMISS||p.closeDisabled?void 0:()=>N.endFlow(d,{endReason:t.USER_CLOSED}),speaking:L,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:u,bubbleFrameRootRef:R,rootChildren:t=>e.createElement(Rs,{...t,theme:B})},"menu"===D?e.createElement(V,null):y&&B.tooltipMissingBehavior!==n.BUBBLE?e.createElement(us,null):e.createElement(ns,{theme:B}))))))},Rs=({visible:t,bubbleFrame:E,theme:s})=>{const o=ms(),{step:n}=o,r=o.session.currentStep&&o.session.currentStep.id,[T,l]=e.useState(!1),a=e.useRef(r);return e.useEffect((()=>{t?l(!0):a.current!==r&&l(!1),a.current=r}),[r,t]),e.createElement(e.Fragment,null,(t||T)&&"flow"===o.contentType&&e.createElement(e.Fragment,null,e.createElement(Ts,{bubbleFrame:E,theme:s}),e.createElement(is,{theme:s})),n.triggers.map((t=>e.createElement(F,{key:t.id,trigger:t}))))},Ss={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Os(e,t){switch(t.kind){case"updateSession":{let E;return E=t.session.id===e.session.id&&t.session.version.steps.find((({crossVersionId:t})=>t===e.step.crossVersionId))||ds(t.session),{...e,session:t.session,step:E}}case"goToStep":{const E=e.session.version.steps.find((e=>e.id===t.stepId));return E?{...e,step:E,contentType:"flow",autoFocusRequested:e.hasFocus||Ls(E),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 ds(e){const{currentStep:t}=e,{steps:E}=e.version;if(t){const e=E.find((({crossVersionId:e})=>e===t.crossVersionId));if(!e)throw new N("Session points to an unknown step: "+t.crossVersionId);return e}return Is(e)}function Is(e){const t=e.version.steps[0];if(!t)throw new N("Session has no current step and its version has no start step");return t}function Ls(e){return Cs(e)}function Cs(e){return e.appearance===T.MODAL||e.appearance===T.BUBBLE&&e.backdrop||e.appearance===T.TOOLTIP&&e.tooltipTargetBlocked}const _s=e.createContext(null),Ds=e.createContext(null);function ps(){return e.useContext(_s)}function ms(){return e.useContext(Ds)}export default As;export{As as FlowApp,Ds as FlowStateContext,Ss as initialFlowState,Cs as isStepModal,ps as useFlowDispatch,ms as useFlowState};
|
|
1
|
+
import{R as o,r as f}from"./vendor.react.js";import{E as k,V as L,k as ce,l as ue,T as O,m as F,n as de,o as R,p as pe,M as fe,U as Y}from"./userflow.js";import"./vendor.html-parse-stringify2.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 H,h as he,S as Te}from"./bubble-frame.styl.js";import{b as X,z as ve,a as Se,l as K,r as ye}from"./flow-condition-types.js";import{u as I,i as ke}from"./client-context.js";import{F as De}from"./FlowChrome.js";import{u as Ne,r as Re}from"./use-selector-element-monitoring.js";import{a as Z,S as Ie}from"./flow-host.styl.js";import{f as Me}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as Ae,u as Be}from"./stylesheets.js";import{T as Fe}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]="921c317b-9c8a-4614-a1d0-b2c0eb2239f9",e._sentryDebugIdIdentifier="sentry-dbid-921c317b-9c8a-4614-a1d0-b2c0eb2239f9")}catch{}})();const Ce=()=>{const{t:e}=x(),s=I(),{dispatch:t,restart:n}=A(),{session:a,step:d}=y(),l="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:l,onClick:()=>s.endFlow(a,{endReason:k.USER_CLOSED})},e("menu.close")),a.version.restartEnabled&&o.createElement("button",{className:l,onClick:n},e("menu.restart")),o.createElement("button",{className:l,onClick:()=>t({kind:"showFlow"})},e("menu.back")))},W=({progress:e,type:s,position:t,totalSteps:n})=>{const{t:a}=x(),d=parseFloat(e||"0"),l={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=s==="NUMBERED"?3:n||0,E=Math.min(Math.floor(d*r),r);return o.createElement("div",null,["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED"].includes(s)&&o.createElement("div",{className:i},Array.from({length:3}).map((b,w)=>o.createElement("div",{key:w,className:`rounded ${w<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:l}))),s==="NUMBERED"&&o.createElement("div",{className:i},o.createElement("span",{className:"numbered-progress"},a("of",{replace:{range:r,selected:E}}))),!["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:l})))};var J=(e=>(e.BOTTOM="BOTTOM",e.TOP="TOP",e))(J||{});const Le=({theme:e})=>{const s=I(),{session:t,step:n,muted:a,shouldLabelDialog:d}=y(),{version:l}=t,{dispatch:c}=A(),u=l.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]),E=l.steps.findIndex(h=>h.id===n.id),b=l.steps.length,w=b>0?((E+1)/b).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:w,type:e.progressBarType,totalSteps:l.steps.length}),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:a,toggleMuted:e.voiceType!==L.NONE?()=>c({kind:"toggleMuted"}):void 0,close:l.closeDisabled?void 0:()=>e.flowXButtonBehavior===ce.DISMISS||m?s.endFlow(t,{endReason:k.USER_CLOSED}):c({kind:"showMenu"})}),!i&&e.progressBarPosition==="BOTTOM"&&e.progressBarEnabled&&o.createElement(W,{progress:w,type:e.progressBarType,position:J.BOTTOM,totalSteps:l.steps.length}))};function Oe(e,s){if(!e)return"";typeof e=="string"&&(e=Q(e));const t=[],n=/[.!?;,]$/;function a(){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
|
+
`);u.forEach((m,i)=>{t.push(m),i<u.length-1&&(a(),t.push(`
|
|
3
|
+
`))})}return}switch(c.type){case"attribute":{const u=ge(c,s);u&&t.push(u);break}default:l(c.children),["link"].includes(c.type)||(a(),t.push(`
|
|
4
|
+
|
|
5
|
+
`));break}}function l(c){c.forEach(u=>d(u))}return l(e.children),t.join("").trim().replace(new RegExp(" ","g")," ").replace(new RegExp("\b","g"),"")}const _e=({bubbleFrame:e,theme:s})=>{const t=I(),{dispatch:n}=A(),{muted:a,session:d,step:l}=y(),c=t.getAudio();f.useEffect(()=>{const r=()=>{n({kind:"speechPlaying"})},E=()=>{n({kind:"speechStopped"})};return c.addEventListener("playing",r),c.addEventListener("ended",E),c.addEventListener("pause",E),()=>{c.removeEventListener("playing",r),c.removeEventListener("ended",E),c.removeEventListener("pause",E),c.pause(),c.src="",n({kind:"speechStopped"})}},[n,c]),f.useEffect(()=>{if(t.audioReady)return;const r=e&&Pe(e)?e.contentWindow:null,E=()=>{window.removeEventListener("mousedown",b),r&&r.removeEventListener("mousedown",b)},b=()=>{E(),t.playAudio(null)};return window.addEventListener("mousedown",b),r&&r.addEventListener("mousedown",b),E},[e,t]);const u=f.useRef(d),m=f.useRef(s),i=f.useRef(l);return f.useEffect(()=>{u.current=d,m.current=s,i.current=l},[d,s,l]),f.useEffect(()=>{if(!t.audioReady||a){t.pauseAudio();return}let r=!1;return(async()=>{if(await new Promise(w=>setTimeout(w,1)),r)return;const b=await xe(t,u.current,m.current,i.current);r||b&&t.playAudio(b)})(),()=>{r=!0}},[a,t,l.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 a=X(s.data),d=Oe(n.content,a);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",Ve=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 He({subjectPosition:e,pointerRef:s,viewportClipRect:t}){const n=s.current;if(!n)return null;const a=n.getBoundingClientRect(),d=ve(Se());let l=e.direction,c,u;return l==null?null:(l==="down"&&t.bottom<a.height/2?l="up":l==="up"&&t.top>d&&(l="down"),c=e.left+e.width/2-a.width/2,u=l==="down"?t.bottom-a.height:t.top,{direction:l,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}=y();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}=y(),n=Z(),a=f.useRef(null),d=f.useRef(null),l=we(e.hiddenCondition),c=f.useMemo(()=>K(e.selector,t.data),[e.selector,t.data]),u=f.useCallback(({targetRect:i,clipEl:r,viewportClipRect:E})=>{const b=Ye({beacon:e,beaconRef:a,clipEl:r,viewportClipRect:E,targetRect:i,theme:s}),w=b&&He({subjectPosition:b.pointerSubjectPosition,pointerRef:d,viewportClipRect:E});Re(()=>{z(a,b),$(d,w)})},[e]),m=f.useCallback(()=>{z(a,null),$(d,null)},[]);return Ne({selector:l?null:c,targetMoved:u,targetLost:m}),o.createElement(o.Fragment,null,o.createElement("div",{ref:a,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(Ve,{ref:d}))};function Ye({beacon:e,beaconRef:s,clipEl:t,viewportClipRect:n,targetRect:a,theme:d}){if(!s.current||a.width===0||a.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=a.left;break;case"top":case"center":case"bottom":i=a.left+a.width/2;break;default:i=a.left+a.width;break}switch(e.placement){case"left":case"center":case"right":r=a.top+a.height/2;break;case"bottom-left":case"bottom":case"bottom-right":r=a.top+a.height;break;default:r=a.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 E=i+c,b=r+u,w=Math.min(32,.5*u);let h;b<n.top+w?h="up":r>n.bottom-w?h="down":h=null;const D=h==null;return{top:r,right:E,bottom:b,left:i,width:c,height:u,pointerSubjectPosition:{direction:h,left:i,width:c},visible:D}}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=I(),{restart:t}=A(),{session:n,step:a}=y(),d=a.theme||n.version.theme,l=a.selector,c=!l||l.type===ue.AUTO&&!l.autoData,u=()=>s.endFlow(n,{endReason:k.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 ",a.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 ",a.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 ",a.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(H,{appearance:"primary",onClick:t,text:e("menu.restart")}),o.createElement(H,{appearance:"default",onClick:u,text:e("menu.close")}))))},C="flowsMuted",Dt=({session:e,checklistSession:s,resourceCenterEmbedsChecklist:t})=>{const n=I(),[a,d]=f.useState(!1),[l,c]=f.useState(null),[u,m]=f.useReducer(Ke,void 0,()=>{const p=e,g=_(p);return{...Xe,session:p,step:g,muted:!!F.getItem(C),autoFocusRequested:te(g)}}),{session:i,step:r,speechPlaying:E,contentType:b}=u,{version:w}=i,h=M(r);let D=0;r.questions.some(p=>p.type===de.NPS)&&(D=420);const T=Be(r.theme||w.theme),v=f.useMemo(()=>{let p=T.bubbleY;const g=s?.version.theme;return!t&&s&&g&&s.version.checklist?.launcherEnabled&&r.appearance===R.BUBBLE&&g.checklistLauncherPlacement===T.bubblePlacement&&(T.avatarType===pe.NONE||g.checklistLauncherX<T.bubbleX+T.avatarSize)&&(p=Math.max(T.bubbleY,g.checklistLauncherY+g.checklistLauncherHeight+T.bubbleY)),{...T,bubbleWidth:Math.max(T.bubbleWidth,D),bubbleY:p}},[t,s,r.appearance,T,D]);f.useEffect(()=>{i!==e&&m({kind:"updateSession",session:e});const p=g=>{g.session.id===i.id&&m({kind:"goToStep",stepId:g.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:v.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&&v.tooltipMissingBehavior===O.END&&!i.draftMode&&n.endFlow(i,{endReason:k.TOOLTIP_TARGET_MISSING})},[n,i,r.id,v.tooltipMissingBehavior]);return f.useEffect(()=>{if(!a||!u.autoFocusRequested)return;!n.originalActiveElement&&n.originalActiveElement!==l?.ownerDocument.defaultView?.frameElement&&(n.originalActiveElement=document.activeElement);let p=l?.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 g=l?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");g&&(p=g)}p&&typeof p.focus=="function"&&p.focus({preventScroll:!0}),m({kind:"autoFocused"})},[n,l,a,u.autoFocusRequested]),f.useEffect(()=>{const p=l?.ownerDocument.defaultView;if(!p)return;const g=()=>{m({kind:"focusOut"}),delete n.originalActiveElement},S=()=>{m({kind:"focusIn"})};return window.addEventListener("focusin",g),p.addEventListener("focusin",S),()=>{window.removeEventListener("focusin",g),p.removeEventListener("focusin",S)}},[l,n]),f.useEffect(()=>{if(!h||!l)return;const p=l.ownerDocument.defaultView,g=p?p.document:document,S=N=>{if(N.key==="Escape"&&!w.closeDisabled)n.endFlow(i,{endReason:k.USER_CLOSED});else if(N.key==="Tab"){const B=l.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),U=B[0],q=B[B.length-1],V=g.activeElement;N.shiftKey?V===U&&(N.preventDefault(),q.focus()):V===q&&(N.preventDefault(),U.focus())}};return window.addEventListener("keydown",S),p?.addEventListener("keydown",S),()=>{window.removeEventListener("keydown",S),p?.removeEventListener("keydown",S)}},[h,n,i,l,w.closeDisabled]),f.useEffect(()=>{if(u.scrollToTopRequested){if(l?.ownerDocument.defaultView?.frameElement){const p=l?.ownerDocument.body;p&&(p.scrollTop=0)}m({kind:"scrolledToTop"})}},[u.scrollToTopRequested,l]),o.createElement(ne.Provider,{value:se},o.createElement(oe.Provider,{value:u},o.createElement(Te.Provider,{value:i},o.createElement(Ie,null,o.createElement(De,{company:i.flow.company,theme:v,position:"fixed",stepKey:r.crossVersionId,stepAppearance:r.appearance,width:r.width,backgroundImageUrl:b==="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===R.MODAL&&v.modalBackdropOnclick===fe.DISMISS&&!w.closeDisabled?()=>n.endFlow(i,{endReason:k.USER_CLOSED}):void 0,speaking:E,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:d,bubbleFrameRootRef:c,rootChildren:p=>o.createElement(Qe,{...p,theme:v})},b==="menu"?o.createElement(Ce,null):j&&v.tooltipMissingBehavior!==O.BUBBLE?o.createElement(Ge,null):o.createElement(Le,{theme:v}))))))},Qe=({visible:e,bubbleFrame:s,theme:t})=>{const n=y(),{step:a}=n,d=n.session.currentStep&&n.session.currentStep.id,[l,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||l)&&n.contentType==="flow"&&o.createElement(o.Fragment,null,o.createElement(_e,{bubbleFrame:s,theme:t}),o.createElement($e,{theme:t})),a.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:a})=>a===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===R.MODAL||e.appearance===R.BUBBLE&&e.backdrop||e.appearance===R.TOOLTIP&&e.tooltipTargetBlocked}const ne=f.createContext(null),oe=f.createContext(null);function A(){return f.useContext(ne)}function y(){return f.useContext(oe)}export{Dt as FlowApp,oe as FlowStateContext,Dt as default,Xe as initialFlowState,M as isStepModal,A as useFlowDispatch,y as useFlowState};
|
|
2
6
|
//# sourceMappingURL=FlowApp.js.map
|
package/FlowChrome.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
!function(){try{var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},e=(new Error).stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="4c3c8ea1-4ff0-4f7d-81f1-71d3efd3411e",t._sentryDebugIdIdentifier="sentry-dbid-4c3c8ea1-4ff0-4f7d-81f1-71d3efd3411e")}catch(o){}}();import{r as t}from"./vendor.react.js";import{u as e,F as o}from"./use-window-resize.js";import{c as a,L as l,D as r,b as i,N as s,z as n,O as c}from"./userflow.js";import{a as u,f as d}from"./flow-host.styl.js";import{b as p}from"./bubble-frame.styl.js";import{S as m}from"./logomark.js";import{o as f}from"./vendor.obj-str.js";import{u as b}from"./use-selector-element-monitoring.js";import{k as h,a as g,g as w,l as T,u as E,e as v,M as y,s as M,j as L}from"./flow-condition-types.js";import{a as k,g as j}from"./stylesheets.js";import{u as B}from"./vendor.react-i18next.js";var O=new URL("avatar-frame.css",import.meta.url).href;const R=({company:R,theme:H,position:C,absoluteWidth:S,absoluteHeight:D,stepKey:U,stepAppearance:F,width:W,backgroundImageUrl:z,tooltipSelector:A,allowMissingTooltipTarget:V,tooltipPlacement:G,backdrop:$,tooltipTargetBlocked:K,backdropPadding:Y,zIndex:X,onTooltipTargetClick:q,onTooltipTargetMissingChange:J,onModalBackdropClick:Q,onVisibleChange:Z,speaking:tt,noIframe:et,MadeWithUserflow:ot,minimizeOnAvatarClick:at,autoHide3pEnabled:lt,bubbleFrameRootRef:rt,frameWrapperHtmlAttributes:it,rootChildren:st,children:nt})=>{const ct=C||"absolute",ut=G||null,dt=Y||"0",pt=ot||I,mt=u(),ft="fixed"===ct?null!=X?X:mt+1:1,bt=ft-1,{i18n:ht}=B(),gt=ht.dir(),wt=t.useRef(null),Tt=t.useRef(null),Et=t.useRef(null),[vt,yt]=t.useState(null),Mt=t.useRef(null),Lt=t.useRef(null),kt=t.useRef(null),jt=t.useRef(null),Bt=t.useRef(null),Ot=t.useRef(null),Rt=t.useRef(null),Pt=t.useRef(null),It=t.useRef(null);t.useLayoutEffect((()=>{const t=wt.current.style;t.animation="none",t.visibility="hidden",t.position="absolute",t.top="-99999px",t.left="-99999px"}),[]);const{loaded:Nt}=k(window,d,H),[_t,xt]=t.useState(!1),[Ht,Ct]=t.useState(!1),St=Nt&&_t&&Ht;let[Dt,Ut]=t.useState(!1);F!==l.BUBBLE&&(at=!1,Dt=!1),t.useEffect((()=>{Ut(!1)}),[U]);const Ft=t.useRef({appearance:null,width:null,theme:H,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}),[Wt,zt]=t.useState(null),At=null!=Wt&&St;t.useEffect((()=>{Z&&Z(At)}),[Z,At]);const Vt=t.useCallback((t=>{Ft.current.lastReportedTooltipTargetMissing!==t&&(Ft.current.lastReportedTooltipTargetMissing=t,J&&J(t))}),[J]),Gt=t.useCallback((({forceAppearanceLayout:t,forceUpdatePosition:e}={})=>{const o=wt.current,i=Tt.current,u=Et.current,d=Lt.current,p=Mt.current,m=kt.current,f=jt.current,b=Bt.current,v=Ot.current,y=Rt.current,k=Pt.current,j=It.current;if(!(o&&i&&u&&vt&&d&&p&&m&&f&&b&&v&&y&&k&&j))return;if(!St)return;const B=Ft.current,{tooltipTargetParams:O}=B;h();let R=F,P=!1;R!==l.TOOLTIP||V||O||(B.tooltipTargetMissing?(R=l.BUBBLE,P=!0):R=null);const I=R!==B.appearance,C=W!==B.width;if((t||I||C||H!==B.theme||$!=B.backdrop||dt!=B.backdropPadding||ut!==B.desiredTooltipPlacement)&&(B.appearance=R,B.width=W,B.theme=H,B.backdrop=$,B.backdropPadding=dt,B.desiredTooltipPlacement=ut,e=!0,function({layoutState:{appearance:t,theme:e,backdrop:o,tooltipTargetMissing:a},width:i,position:n,absoluteWidth:c,root:u,bubble:d,bubbleFrameRoot:p,avatar:m,avatarNotch:f,modalBackdrop:b,dir:h}){const g="absolute"===n?c||1024:T(w()),{avatarSize:E,bubblePlacement:v}=e;let y=e.bubbleWidth,M=null,L=null,k=`userflowjs-bubble-frame-root userflowjs-bubble-frame-root--appearance-${t?.toLowerCase()}`,j="hidden",B=null,O=null,R=null,P=null,I="userflowjs-bubble__avatar-notch",_="hidden",x=null,H=null,C=null,S=null,D="userflowjs-modal-backdrop";(t===l.MODAL||!a&&t===l.BUBBLE&&o)&&(D+=" userflowjs-modal-backdrop--visible");switch(t){case l.BUBBLE:if(e.avatarType!==r.NONE){j="",_="",v===s.TOP_LEFT||v===s.TOP_CENTER||v===s.TOP_RIGHT?(M=E+20,B=0,x=-40,I+=" userflowjs-bubble__avatar-notch--top"):(L=E+20,R=0,C=-40,I+=" userflowjs-bubble__avatar-notch--bottom");const t=v===s.TOP_LEFT||v===s.TOP_CENTER||v===s.BOTTOM_LEFT||v===s.BOTTOM_CENTER||v===s.CENTER;"ltr"===h&&t||"rtl"===h&&!t?(P=0,S=E,I+=" userflowjs-bubble__avatar-notch--left"):(O=0,H=E,I+=" userflowjs-bubble__avatar-notch--right")}break;case l.MODAL:y=e.modalWidth,e.avatarType!==r.NONE&&(j="",P=`calc(50% - ${E/2}px)`,B=-E/2);break;case l.TOOLTIP:y=e.tooltipWidth}null!=i&&(y=i);y=Math.min(y,g-32),u.classList.toggle("userflowjs-flow-chrome--position-absolute","absolute"===n),u.classList.toggle("userflowjs-flow-chrome--position-relative","relative"===n),u.classList.toggle("userflowjs-flow-chrome--position-fixed","fixed"===n),u.classList.toggle("userflowjs-flow-chrome--appearance-modal",t===l.MODAL);const U=null!=t&&t!==l.HIDDEN;u.style.position="",u.style.top="",u.style.left="",u.style.visibility=U?"":"hidden",u.style.animation=U?"":"none",N(d,"width",T(y)),N(d,"padding-top",M),N(d,"padding-bottom",L),p.className=k,N(m,"width",T(e.avatarSize)),N(m,"height",T(e.avatarSize)),m.style.visibility=j,N(m,"top",B),N(m,"right",O),N(m,"bottom",R),N(m,"left",P),f.className=I,f.style.visibility=_,N(f,"top",x),N(f,"right",H),N(f,"bottom",C),N(f,"left",S),b.className=D}({layoutState:B,width:W,position:ct,absoluteWidth:S,root:o,bubble:i,bubbleFrameRoot:vt,avatar:d,avatarNotch:p,modalBackdrop:j,dir:gt})),!et){const t=vt.offsetHeight,o=g()-2*(w()<800?0:16)-(H.avatarType===r.NONE?0:R===l.BUBBLE?20+H.avatarSize:R===l.MODAL?H.avatarSize/2:0),a=Math.min(t,o);if(R&&a!==B.bubbleFrameHeight){if(B.bubbleFrameHeight=a,N(u,"height",T(a)),E(u)&&u.contentDocument){u.contentDocument.documentElement.style.overflowY=t<=o?"hidden":"scroll"}e=!0}}if(e&&R){let t=I;if(R===l.TOOLTIP){(B.tooltipTargetParams&&B.tooltipTargetParams.targetEl)!==(B.prevTooltipTargetParams&&B.prevTooltipTargetParams.targetEl)&&(t=!0)}B.prevTooltipTargetParams=B.tooltipTargetParams,function({layoutState:t,animateIn:e,position:o,absoluteWidth:a,absoluteHeight:i,desiredTooltipPlacement:u,root:d,bubble:p,tooltipNotch:m,tooltipBackdrop:f,tooltipBlockTop:b,tooltipBlockRight:h,tooltipBlockBottom:E,tooltipBlockLeft:v,dir:y}){const{appearance:L,theme:k,tooltipTargetParams:j,backdrop:B,backdropPadding:O}=t,{bubblePlacement:R}=k,P=16,I=k.tooltipNotchSize,H=10,{width:C,height:S}=p.getBoundingClientRect(),D="absolute"===o?a||1024:T(w()),U="absolute"===o?i||768:T(g());let F=0,W=0,z="userflowjs-bubble__tooltip-notch",A="hidden",V=null,G=null,$=null,K=null,Y="userflowjs-tooltip-backdrop",X=null,q=null,J=null,Q=null,Z=null,tt=null,et=null,ot=null,at="userflowjs-tooltip-block userflowjs-tooltip-block--top",lt=null,rt=null,it="userflowjs-tooltip-block userflowjs-tooltip-block--right",st=null,nt=null,ct="userflowjs-tooltip-block userflowjs-tooltip-block--bottom",ut=null,dt=null,pt="userflowjs-tooltip-block userflowjs-tooltip-block--left",mt=null,ft=null;switch(L){case l.BUBBLE:F=R===s.TOP_LEFT||R===s.BOTTOM_LEFT?k.bubbleX:R===s.TOP_CENTER||R===s.CENTER||R===s.BOTTOM_CENTER?(D-C)/2:D-C-k.bubbleX,W=R===s.TOP_LEFT||R===s.TOP_CENTER||R===s.TOP_RIGHT?k.bubbleY:R===s.CENTER?(U-S)/2:U-S-k.bubbleY,"rtl"===y&&(F=D-F-C),F=Math.max(0,Math.min(D-C,F)),W=Math.max(0,Math.min(U-S,W));break;case l.MODAL:{let t=P;k.avatarType!==r.NONE&&(t+=k.avatarSize/2),F=P+(D-2*P-C)/2,W=t+(U-t-P-S)/2;break}case l.TOOLTIP:{let e;if(j){let{targetRect:a,viewportClipRect:l}=j;if("absolute"===o){const t=d.offsetParent.getBoundingClientRect();l={top:0,right:D,bottom:U,left:0},a={top:a.top-t.top,right:a.right-t.left,bottom:a.bottom-t.top,left:a.left-t.left,width:a.width,height:a.height}}let r=0;if(B){const{paddingTop:t,paddingRight:e,paddingBottom:o,paddingLeft:l}=function(t){if(!t||"0"===t)return{paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0};const e=t.trim().split(" ");if(1===e.length){const t=x(e[0]);return{paddingTop:t,paddingRight:t,paddingBottom:t,paddingLeft:t}}if(2===e.length){const t=x(e[0]),o=x(e[1]);return{paddingTop:t,paddingRight:o,paddingBottom:t,paddingLeft:o}}return{paddingTop:x(e[0]),paddingRight:x(e[1]),paddingBottom:x(e[2]),paddingLeft:x(e[3])}}(O);a={top:a.top-t,right:a.right+e,bottom:a.bottom+o,left:a.left-l,width:a.width+l+e,height:a.height+t+o},r=Math.min(t,e,o,l)}const i=a,s=k.backdropHighlightType==n.OUTSIDE?k.backdropHighlightSpread:0;if(B&&s&&(a={top:a.top-s,right:a.right+s,bottom:a.bottom+s,left:a.left-s,width:a.width+2*s,height:a.height+2*s}),e=function({targetRect:t,bubbleWidth:e,bubbleHeight:o,containerWidth:a,containerHeight:l,viewportClipRect:r,tooltipNotchSize:i,currentTooltipPlacement:s,desiredTooltipPlacement:n}){if(t.bottom<=r.top)return o+i<=l-r.top?c.BELOW:c.ABOVE;if(t.top>=r.bottom)return o+i<=r.bottom?c.ABOVE:c.BELOW;if(t.right<=r.left)return e+i<=a-r.left?c.RIGHT:c.LEFT;if(t.left>=r.right)return e+i<=r.right?c.LEFT:c.RIGHT;const u=s=>{const n=t.left+t.width/2,u=n>=r.left&&n<=r.right,d=t.top+t.height/2,p=d>=r.top&&d<=r.bottom;switch(s){case c.BELOW:return l-t.bottom>o+i&&u;case c.ABOVE:return t.top>o+i&&u;case c.RIGHT:return a-t.right>e+i&&p;case c.LEFT:return t.left>e+i&&p}};if(n&&u(n))return n;if(s&&u(s))return s;const d=[{placement:c.BELOW,dist:t.top},{placement:c.ABOVE,dist:l-t.bottom},{placement:c.RIGHT,dist:t.left},{placement:c.LEFT,dist:a-t.right}];d.sort(((t,e)=>t.dist-e.dist));for(const{placement:c}of d)if(u(c))return c;return c.BELOW}({targetRect:a,bubbleWidth:C,bubbleHeight:S,containerWidth:D,containerHeight:U,viewportClipRect:l,tooltipNotchSize:I,currentTooltipPlacement:t.tooltipPlacement,desiredTooltipPlacement:u}),e===c.BELOW||e===c.ABOVE?(F=a.left+a.width/2-C/2,F=Math.max(P,Math.min(D-C-P,F)),K=Math.max(H,Math.min(C-H-2*I,a.left+a.width/2-I-F)),e===c.BELOW?V=2*-I:$=2*-I):e===c.RIGHT?(F=a.right+I,F=Math.max(F,l.left+I),F=Math.min(F,l.right+I),F=Math.max(F,I),F=Math.min(F,D-C)):(F=a.left-I-C,F=Math.max(F,l.left-C-I),F=Math.min(F,l.right-C-I),F=Math.max(F,0),F=Math.min(F,D-C-I)),e===c.LEFT||e===c.RIGHT?(W=a.top+a.height/2-S/2,W=Math.max(P,Math.min(U-S-P,W)),V=Math.max(H,Math.min(S-H-2*I,a.top+a.height/2-I-W)),e===c.LEFT?G=2*-I:K=2*-I):e===c.BELOW?(W=a.bottom+I,W=Math.max(W,l.top+I),W=Math.min(W,l.bottom+I),W=Math.max(W,I),W=Math.min(W,U-S)):(W=a.top-I-S,W=Math.max(W,l.top-S-I),W=Math.min(W,l.bottom-S-I),W=Math.max(W,0),W=Math.min(W,U-S-I)),B){const t=window.getComputedStyle(j.targetEl);X=Math.max(0,i.top),q=Math.max(0,D-i.right),J=Math.max(0,U-i.bottom),Q=Math.max(0,i.left),Z=Math.max(0,M(t.borderTopLeftRadius)+r),tt=Math.max(0,M(t.borderTopRightRadius)+r),et=Math.max(0,M(t.borderBottomRightRadius)+r),ot=Math.max(0,M(t.borderBottomLeftRadius)+r),lt=Math.max(0,i.right),rt=Math.max(0,i.top),st=Math.max(0,i.right),nt=Math.max(0,i.bottom),ut=Math.max(0,i.left),dt=Math.max(0,i.bottom),mt=Math.max(0,i.left),ft=Math.max(0,i.top)}}else e=u||c.BELOW,e!==c.BELOW&&e!==c.ABOVE||(K=C/2-I,e===c.BELOW?V=2*-I:$=2*-I),e!==c.LEFT&&e!==c.RIGHT||(V=S/2-I,e===c.LEFT?G=2*-I:K=2*-I);t.tooltipPlacement=e,z+=` userflowjs-bubble__tooltip-notch--${e.toLowerCase()}`,A="",B&&(Y+=" userflowjs-tooltip-backdrop--visible",at+=" userflowjs-tooltip-block--visible",it+=" userflowjs-tooltip-block--visible",ct+=" userflowjs-tooltip-block--visible",pt+=" userflowjs-tooltip-block--visible");break}}p.style.transition="";let bt=F,ht=W;if(e&&(p.style.opacity="0",L===l.TOOLTIP)){const e=24;switch(t.tooltipPlacement){case c.BELOW:W+=e;break;case c.ABOVE:W-=e;break;case c.RIGHT:F+=e;break;case c.LEFT:F-=e}}"relative"!==o&&_(p,F,W);if(m.className=z,m.style.visibility=A,N(m,"top",V),N(m,"right",G),N(m,"bottom",$),N(m,"left",K),f.className=Y,N(f,"top",X),N(f,"right",q),N(f,"bottom",J),N(f,"left",Q),N(f,"border-top-left-radius",Z),N(f,"border-top-right-radius",tt),N(f,"border-bottom-right-radius",et),N(f,"border-bottom-left-radius",ot),b.className=at,N(b,"width",lt),N(b,"height",rt),h.className=it,N(h,"left",st),N(h,"height",nt),E.className=ct,N(E,"left",ut),N(E,"top",dt),v.className=pt,N(v,"width",mt),N(v,"top",ft),e){p.offsetWidth;const t="opacity 250ms linear";L===l.TOOLTIP?p.style.transition=`${t}, transform 500ms cubic-bezier(0.25, 0.8, 0.5, 1)`:p.style.transition=t,p.style.opacity="1","relative"!==o&&_(p,bt,ht)}}({layoutState:B,animateIn:t,position:ct,absoluteWidth:S,absoluteHeight:D,desiredTooltipPlacement:ut,root:o,bubble:i,tooltipNotch:m,tooltipBackdrop:f,tooltipBlockTop:b,tooltipBlockRight:v,tooltipBlockBottom:y,tooltipBlockLeft:k,dir:gt})}if(R===l.TOOLTIP){const t=O&&O.targetEl;t&&B.stepKeyScrolledIntoView!==U&&B.targetScrolledIntoView!==t&&(B.stepKeyScrolledIntoView=U,B.targetScrolledIntoView=t,function(t){if(a.customScrollIntoView)return void a.customScrollIntoView(t);const{scrollPadding:e}=a;if(e&&L(t)===document.scrollingElement){const o=e.top||0,a=e.right||0,l=e.bottom||0,r=e.left||0;let i=0,s=0;const n=t.getBoundingClientRect(),c=w(),u=g();if(n.top<o?i=n.top-o:n.bottom>u-l&&(i=n.bottom-u+l),n.left<r?s=n.left-r:n.right>c-a&&(s=n.right-c+a),0!=i||0!=s)return void window.scrollBy({top:i,left:s,behavior:"smooth"})}try{t.scrollIntoView({behavior:"smooth",block:"nearest"})}catch(o){console.warn("Userflow.js: scrollIntoView error (falling back to no options).",o),t.scrollIntoView()}}(t))}else B.stepKeyScrolledIntoView=void 0,B.targetScrolledIntoView=null;Vt(P),zt(R)}),[St,vt,U,F,W,H,ct,S,D,V,ut,$,dt,et,Vt,gt]),$t=t.useRef(Gt);$t.current=Gt;const Kt=t.useRef(!1);t.useEffect((()=>{const t=()=>{Kt.current=!0};return window.addEventListener("pagehide",t),()=>window.removeEventListener("pagehide",t)}),[]);const Yt=()=>{window.clearTimeout(Ft.current.tooltipTargetMissingTimeout),Ft.current.tooltipTargetMissingTimeout=void 0};t.useEffect((()=>Yt),[]);const Xt=t.useCallback((()=>{const t=Ft.current;if(t.tooltipTargetParams=null,V||(t.tooltipPlacement=null),F!==l.TOOLTIP)return Yt(),void(t.tooltipTargetMissing=!1);if(!V&&!t.tooltipTargetMissingTimeout){t.tooltipTargetMissing=!1;const e=!A||v(A)||A.type!==i.AUTO||A.autoData?1e3*parseFloat(H.tooltipMissingToleranceSeconds):1;t.tooltipTargetMissingTimeout=window.setTimeout((()=>{if(!Kt.current){if(A&&!v(A)){let t=A.autoData;if(A.autoData)try{t=JSON.parse(A.autoData)}catch(e){}console.warn("Userflow.js: Tooltip target not found on page.\n",{type:A.type,autoData:t,excludeText:A.excludeText,precision:A.precision,text:A.text,css:A.css})}Yt(),t.tooltipTargetMissing=!0,$t.current()}}),e)}$t.current()}),[F,V,A,H.tooltipMissingToleranceSeconds]),qt=t.useCallback((t=>{const e=Ft.current;Yt(),e.tooltipTargetParams&&e.tooltipTargetParams.targetEl!==t.targetEl&&(e.tooltipPlacement=null),e.tooltipTargetParams=t,Gt({forceUpdatePosition:!0})}),[Gt]);b({selector:F===l.TOOLTIP&&A||null,targetMoved:qt,targetLost:Xt,onTargetClick:q});const Jt=t.useCallback((()=>Gt({forceAppearanceLayout:!0})),[Gt]);e(Jt),t.useEffect((()=>{if(!vt||et||"function"!=typeof y)return;let t;const e=new y((()=>{t||(t=window.requestAnimationFrame((()=>{t=void 0,$t.current()})))}));return e.observe(vt,{childList:!0,attributes:!0,subtree:!0}),()=>{e.disconnect(),t&&window.cancelAnimationFrame(t)}}),[vt,et]),t.useLayoutEffect((()=>{$t.current()})),t.useLayoutEffect((()=>{"absolute"===ct&&Gt({forceAppearanceLayout:!0})}),[ct,S,D]);const Qt=t=>{t.preventDefault(),t.stopPropagation()};return function(e,o){const l=window.Intercom;t.useEffect((()=>{if(o&&e.autoHideIntercom&&"function"==typeof l&&!a.autoHide3pDisabled){try{l("update",{hide_default_launcher:!0})}catch(t){console.warn("Userflow.js: Error when hiding Intercom launcher",t)}return()=>{if(!a.autoHide3pDisabled)try{l("update",{hide_default_launcher:!1})}catch(t){console.warn("Userflow.js: Error when unhiding Intercom launcher",t)}}}}),[l,e.autoHideIntercom,o]);const r=window.$crisp;t.useEffect((()=>{if(o&&e.autoHideCrisp&&r&&!a.autoHide3pDisabled){try{r.push(["do","chat:hide"])}catch(t){console.warn("Userflow.js: Error when hiding Crisp Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{r.push(["do","chat:show"])}catch(t){console.warn("Userflow.js: Error when unhiding Crisp Chat",t)}}}}),[r,e.autoHideCrisp,o]);const i=window.HubSpotConversations;t.useEffect((()=>{if(o&&e.autoHideHubspot&&i&&!a.autoHide3pDisabled){try{i.widget.remove()}catch(t){console.warn("Userflow.js: Error when hiding HubSpot Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{i.widget.load()}catch(t){console.warn("Userflow.js: Error when unhiding HubSpot Chat",t)}}}}),[i,e.autoHideHubspot,o]);const s=window.drift;t.useEffect((()=>{if(o&&e.autoHideDrift&&s&&!a.autoHide3pDisabled){try{s.api.widget.hide()}catch(t){console.warn("Userflow.js: Error when hiding Drift Chat",t)}return()=>{if(!a.autoHide3pDisabled)try{s.api.widget.show()}catch(t){console.warn("Userflow.js: Error when unhiding Drift Chat",t)}}}}),[s,e.autoHideDrift,o])}(H,!!lt&&Wt===l.BUBBLE),t.createElement("div",{ref:wt,"data-testid":"flow-chrome",className:"userflowjs-flow-chrome userflowjs-theme-root",style:j(H),dir:gt},t.createElement("div",{className:"userflowjs-bubble",ref:Tt,style:{zIndex:ft}},t.createElement("div",{className:f({"userflowjs-bubble-outline":!0,[`userflowjs-bubble-outline--bubble-placement-${(H.bubblePlacement||"").toLowerCase().replace(/_/,"-")}`]:!0,"userflowjs-bubble-outline--minimizable":!!at,"userflowjs-bubble-outline--minimized":Dt})},t.createElement("div",{className:"userflowjs-bubble__frame-wrapper",...it},t.createElement(o,{className:"userflowjs-bubble__frame",elRef:Et,stylesheet:p,theme:H,onStylesheetsLoad:xt,noIframe:et,title:F.toLowerCase()},t.createElement("div",{className:"userflowjs-bubble-frame-root",ref:t=>{rt&&rt(t),yt(t)},style:z?{backgroundImage:`url("${encodeURI(z)}")`}:void 0},nt,R.flowBranding&&t.createElement("div",{className:"userflowjs-bubble-made-with-userflow"},t.createElement("div",{className:"userflowjs-bubble-made-with-userflow__absolute"},t.createElement(pt,{company:R},t.createElement(m,null),t.createElement("div",null,"Made with Userflow"))))))),t.createElement("div",{ref:Mt,className:"userflowjs-bubble__avatar-notch"})),t.createElement(o,{className:f({"userflowjs-bubble__avatar":!0,"userflowjs-bubble__avatar--minimizable":!!at,"userflowjs-bubble__avatar--speaking":!!tt}),elRef:Lt,stylesheet:O,theme:H,onStylesheetsLoad:Ct,noIframe:et,ariaHidden:!0,title:F.toLowerCase()},t.createElement("div",{className:f({"userflowjs-avatar-frame-root":!0,"userflowjs-avatar-frame-root--minimizable":!!at}),onClick:at?()=>Ut((t=>!t)):void 0},t.createElement(P,{theme:H}))),t.createElement("div",{ref:kt,className:"userflowjs-bubble__tooltip-notch"})),t.createElement("div",{ref:jt,className:"userflowjs-tooltip-backdrop",onMouseDown:Qt,style:{zIndex:bt,pointerEvents:K?void 0:"none"}}),t.createElement("div",{ref:Bt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:bt}}),t.createElement("div",{ref:Ot,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:bt}}),t.createElement("div",{ref:Rt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:bt}}),t.createElement("div",{ref:Pt,className:"userflowjs-tooltip-block",onMouseDown:Qt,style:{zIndex:bt}}),t.createElement("div",{ref:It,className:"userflowjs-modal-backdrop",onMouseDown:Qt,onClick:Q,style:{zIndex:bt}}),st&&st({visible:At,bubbleFrame:Et.current}))},P=({theme:e})=>{const o="https://js.userflow.com/cartoon-avatars-no-bg/";let a;return a=e.avatarType===r.ASSET&&e.avatarAsset?e.avatarAsset.assetUrl:e.avatarType===r.CARTOON&&e.avatarName?o+e.avatarName+".svg?3":e.avatarType===r.URL&&e.avatarUrl?e.avatarUrl:o+"none.svg",t.createElement("img",{src:a,alt:""})},I=({company:e,children:o})=>t.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"},o);function N(t,e,o){null==o?t.style.removeProperty(e):t.style.setProperty(e,"number"==typeof o?o+"px":o,"important")}function _(t,e,o){e=Math.round(e),o=Math.round(o),t.style.transform=`translate3d(${e}px, ${o}px, 0px)`}function x(t){const e=parseInt(t,10);return isNaN(e)?0:e}export{R 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,o as y,p as it,l as me,q as j,y as be,x 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{a as Wt,g as Dt,c as rt,m as Ee,d as ae,M as le,k as Ht,n as ye,h as Le}from"./flow-condition-types.js";import{a as ve,g as Be}from"./stylesheets.js";import"./vendor.html-parse-stringify2.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]="695e5e40-b779-47f6-889b-768af9c6f032",e._sentryDebugIdIdentifier="sentry-dbid-695e5e40-b779-47f6-889b-768af9c6f032")}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:D,noIframe:P,MadeWithUserflow:n,minimizeOnAvatarClick:F,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&&(F=!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:Ft}=p;Le();let V=l,Qt=!1;V===y.TOOLTIP&&!E&&!Ft&&(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=Dt()<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=Ft&&Ft.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":!!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),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":!!F,"userflowjs-bubble__avatar--speaking":!!D}),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":!!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:k,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,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"):(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",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:D}=L,P=At,n=L.tooltipNotchSize,F=10,{width:R,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,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:{D===j.TOP_LEFT||D===j.BOTTOM_LEFT?r=L.bubbleX:D===j.TOP_CENTER||D===j.CENTER||D===j.BOTTOM_CENTER?r=(O-R)/2:r=O-R-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-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(F,Math.min(R-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-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(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),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=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};
|
|
2
3
|
//# sourceMappingURL=FlowChrome.js.map
|
package/LauncherApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import{R as i,r as u}from"./vendor.react.js";import{L as R,r as l,s as a,o as te,t as re,v as p,w as K,x 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 Te,u as me}from"./stylesheets.js";import{w as pe,f as be,L as ge,S as Ce}from"./flow-host.styl.js";import"./vendor.html-parse-stringify2.js";import{F as Le}from"./FlowChrome.js";import{B as Re}from"./BubbleToolbar.js";import{b as we,r as V}from"./flow-condition-types.js";import{T as Ae}from"./Trigger.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]="68a9899e-00a2-40e1-a6b3-4dc6a32ccdbb",t._sentryDebugIdIdentifier="sentry-dbid-68a9899e-00a2-40e1-a6b3-4dc6a32ccdbb")}catch{}})();const ve=i.forwardRef(({appearance:t,icon:c,buttonText:d,theme:T,noAnimation:E,noFixed:w,onClick:e,onMouseEnter:s,onMouseLeave:o,noPointerEvents:n,zIndex:m},r)=>{const{loaded:C}=fe(window,be,T),k=T&&t===R.BUTTON?T:null,{loaded:H}=he(window,k),I={"userflowjs-launcher":!0,"userflowjs-launcher--activate-on-click":!!e,"userflowjs-fixed-widget":!w},f={ref:r,style:{...Ee(T),zIndex:m||pe(ge),pointerEvents:n?"none":void 0},onClick:e,onMouseEnter:s,onMouseLeave:o};if(!C||!H)return null;switch(t){case R.BEACON:return i.createElement("div",{className:U({...I,"userflowjs-beacon":!0,"userflowjs-beacon--pulse":!E,"userflowjs-beacon--pulse-still":!!E}),...f},i.createElement("div",{className:"userflowjs-beacon__ring"}),i.createElement("div",{className:"userflowjs-beacon__ring"}));case R.BUTTON:return i.createElement("div",{className:U({...I,"userflowjs-launcher--button":!0}),...f},d);case R.HIDDEN:return null;case R.ICON:return i.createElement("div",{className:U({...I,"userflowjs-launcher--icon":!0}),...f},i.createElement(Te,{icon:c||"solid/info-circle",size:T.launcherIconSize}))}}),Ie="userflowjs-fixed-widget--visible",rt=({session:t,active:c})=>{const d=ue(),{version:T}=t,E=t.id,w=t.flow.id,e=t.version.launcher,[s,o]=u.useState(null),n=me(T.theme),m=t.locale?t.locale.standardLocaleId:n.languageId;u.useEffect(()=>{de.changeLanguage(m)},[m]);const{activateOn:r}=e,C=e.activeWhileTooltipHover||e.buttons.length>0,k=e.hiddenWhileActive&&r!==l.LAUNCHER_HOVER,H=!c||!k,I=r===l.LAUNCHER_CLICK||r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK||C,f=u.useRef({}),A=u.useCallback(()=>{let h=null;const{targetEl:b,clipEl:g,viewportClipRect:F}=f.current,S=s;S&&(b&&g&&F&&(h=ke({targetEl:b,subjectEl:S,clipEl:g,viewportClipRect:F,position:e.targetPosition,subjectAnchor:e.appearance===R.BEACON?"center":"side"})),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:T,position:E,subjectAnchor:w}){const e=V(t);if(e.width===0||e.height===0)return null;const s=c.getBoundingClientRect();let o=0,n=0,{side:m,align:r}=E;switch(m===a.AUTO&&(m=a.TOP,r=p.END),m){case a.TOP:n=e.top;break;case a.BOTTOM:n=e.bottom;break;case a.LEFT:o=e.left;break;case a.RIGHT:o=e.right;break}switch(m){case a.TOP:case a.BOTTOM:switch(r){case p.START:o=e.left;break;case p.CENTER:o=e.left+e.width/2;break;case p.END:o=e.right;break}break;case a.LEFT:case a.RIGHT:switch(r){case p.START:n=e.top;break;case p.CENTER:n=e.top+e.height/2;break;case p.END:n=e.bottom;break}break}switch(E.xUnit===K.PERCENT?o+=E.xOffset/100*e.width:o+=E.xOffset,E.yUnit===K.PERCENT?n+=E.yOffset/100*e.height:n+=E.yOffset,w){case"center":o-=s.width/2,n-=s.height/2;break;case"side":switch(m){case a.TOP:n-=s.height;break;case a.LEFT:o-=s.width;break}switch(m){case a.TOP:case a.BOTTOM:switch(r){case p.CENTER:o-=s.width/2;break;case p.END:o-=s.width;break}break;case a.LEFT:case a.RIGHT:switch(r){case p.CENTER:n-=s.height/2;break;case p.END:n-=s.height;break}break}}if(o+s.width<T.left||o>T.right||n+s.height<T.top||n>T.bottom)return null;const C=V(d);return o=Math.max(o,C.left-d.scrollLeft),n=Math.max(n,C.top-d.scrollTop),o=Math.round(o),n=Math.round(n),{left:o,top:n}}function Oe(t,c){t.classList.toggle(Ie,c!=null),c&&(t.style.transform=`translate3d(${c.left}px, ${c.top}px, 0)`)}function Ne(t){switch(t.side){case a.AUTO:return null;case a.TOP:return N.ABOVE;case a.BOTTOM:return N.BELOW;case a.LEFT:return N.LEFT;case a.RIGHT:return N.RIGHT}}export{rt as LauncherApp,rt as default};
|
|
2
2
|
//# sourceMappingURL=LauncherApp.js.map
|