userflow.js-self-hosted 0.1.1007916 → 0.1.1007936

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/FlowApp.js CHANGED
@@ -1,2 +1,2 @@
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]="b3e8407e-0e59-4a4d-8f6e-25e04741940f",e._sentryDebugIdIdentifier="sentry-dbid-b3e8407e-0e59-4a4d-8f6e-25e04741940f")}catch(o){}}();import{r as e}from"./vendor.react.js";import{E as t,V as o,J as n,b as s,K as r,H as l,L as a,x as i,D as c,M as u,U as d}from"./userflow.js";import{B as p}from"./BubbleToolbar.js";import{m,d as f,R as b,i as h,g as w,u as g,c as E,h as v,S as y}from"./bubble-frame.styl.js";import{b as k,z as j,a as T,t as S,r as R}from"./flow-condition-types.js";import{u as L,i as M}from"./client-context.js";import{F as x}from"./FlowChrome.js";import{u as F,r as C}from"./use-selector-element-monitoring.js";import{a as I,S as N}from"./flow-host.styl.js";import{m as D}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as _,u as P}from"./stylesheets.js";import{T as B}from"./Trigger.js";import{u as q}from"./vendor.react-i18next.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.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";import"./vendor.babel.runtime.js";const A=()=>{const{t:o}=q(),n=L(),{dispatch:s,restart:r}=le(),{session:l,step:a}=ae(),i="userflowjs-bubble-button userflowjs-bubble-button--default userflowjs-bubble-menu__item";return e.createElement("div",{role:"dialog","aria-modal":ne(a)?"true":void 0,"aria-label":"Guide menu"},e.createElement("div",{className:"userflowjs-bubble-menu__title"},o("menu.title")),e.createElement("button",{className:i,onClick:()=>n.endFlow(l,{endReason:t.USER_CLOSED})},o("menu.close")),l.version.restartEnabled&&e.createElement("button",{className:i,onClick:r},o("menu.restart")),e.createElement("button",{className:i,onClick:()=>s({kind:"showFlow"})},o("menu.back")))},O=({progress:t})=>{const o={width:100*parseFloat(t||"0")+"%"};return e.createElement("div",{className:"userflowjs-bubble-progress"},e.createElement("div",{className:"userflowjs-bubble-progress__fill",style:o}))},V=({theme:s})=>{const r=L(),{session:l,step:a,muted:i,shouldLabelDialog:c}=ae(),{version:u}=l,{dispatch:d}=le(),h=u.steps[0],w=h&&h.id===a.id,g=w&&"1"===a.progress,E=e.useMemo((()=>a.content&&m(f(a.content),{buttons:a.buttons,questions:a.questions})),[a.content,a.buttons,a.questions]);return e.createElement("div",{key:a.id,role:"alertdialog","aria-modal":ne(a)?"true":void 0,"aria-label":c?"Guide":void 0},!g&&e.createElement(O,{progress:a.progress}),e.createElement("div",{id:"userflowjs-bubble-content",className:"userflowjs-bubble-content"},e.createElement(b,{doc:E,lookupAttribute:k(l.data),buttons:a.buttons,questions:a.questions})),e.createElement(p,{draftMode:l.draftMode,muted:i,toggleMuted:s.voiceType!==o.NONE?()=>d({kind:"toggleMuted"}):void 0,close:u.closeDisabled?void 0:()=>s.flowXButtonBehavior===n.DISMISS||w?r.endFlow(l,{endReason:t.USER_CLOSED}):d({kind:"showMenu"})}))};function U(e,t){if(!e)return"";"string"==typeof e&&(e=f(e));const o=[],n=/[.!?;,]$/;function s(){const e=(o[o.length-1]||"").trim();e&&!e.match(n)&&o.push(".")}function r(e){e.forEach((e=>function(e){if(h(e)){if(e.text&&!e.silent){const t=e.text.split("\n");t.forEach(((e,n)=>{o.push(e),n<t.length-1&&(s(),o.push("\n"))}))}}else switch(e.type){case"attribute":{const n=w(e,t);n&&o.push(n);break}default:r(e.children),["link"].includes(e.type)||(s(),o.push("\n\n"))}}(e)))}return r(e.children),o.join("").trim().replace(new RegExp(String.fromCharCode(160),"g")," ").replace(new RegExp(String.fromCharCode(8),"g"),"")}const z=({bubbleFrame:t,theme:n})=>{const s=L(),{dispatch:r}=le(),{muted:l,session:a,step:i}=ae(),c=s.getAudio();e.useEffect((()=>{const e=()=>{r({kind:"speechPlaying"})},t=()=>{r({kind:"speechStopped"})};return c.addEventListener("playing",e),c.addEventListener("ended",t),c.addEventListener("pause",t),()=>{c.removeEventListener("playing",e),c.removeEventListener("ended",t),c.removeEventListener("pause",t),c.pause(),c.src="",r({kind:"speechStopped"})}}),[r,c]),e.useEffect((()=>{if(s.audioReady)return;const e=t&&"IFRAME"===t.tagName?t.contentWindow:null;const o=()=>{window.removeEventListener("mousedown",n),e&&e.removeEventListener("mousedown",n)},n=()=>{o(),s.playAudio(null)};return window.addEventListener("mousedown",n),e&&e.addEventListener("mousedown",n),o}),[t,s]);const u=e.useRef(a),d=e.useRef(n),p=e.useRef(i);return e.useEffect((()=>{u.current=a,d.current=n,p.current=i}),[a,n,i]),e.useEffect((()=>{if(!s.audioReady||l)return void s.pauseAudio();let e=!1;return(async()=>{if(await new Promise((e=>setTimeout(e,1))),e)return;const t=await async function(e,t,n,s){if(n.voiceType===o.SYNTHETIC&&"string"==typeof n.syntheticVoice&&s.content){e.ensureIdentified();const o=k(t.data),r=U(s.content,o);return e.getStepSpeech(n.syntheticVoice,r)}if(n.voiceType===o.MANUAL&&s.speechAsset)return s.speechAsset.assetUrl;return null}(s,u.current,d.current,p.current);e||t&&s.playAudio(t)})(),()=>{e=!0}}),[l,s,i.id,n.voiceType,n.syntheticVoice]),null};const Y=e.forwardRef(((t,o)=>{const n=I();return e.createElement("div",{ref:o,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:n+2}},e.createElement(_,{icon:D}))}));function G(e,t){const o=e.current;o&&(o.classList.toggle("userflowjs-out-of-viewport-pointer--visible",null!=t),t&&(o.style.left=t.left+"px",o.style.top=t.top+"px",o.classList.toggle("userflowjs-out-of-viewport-pointer--visible-up","up"===t.direction),o.classList.toggle("userflowjs-out-of-viewport-pointer--visible-down","down"===t.direction)))}const H=({theme:t})=>{const{step:o}=ae();return e.createElement(e.Fragment,null,o.beacons.map((o=>e.createElement(X,{key:o.id,beacon:o,theme:t}))))},X=({beacon:t,theme:o})=>{const{session:n}=ae(),s=I(),r=e.useRef(null),l=e.useRef(null),a=g(t.hiddenCondition),i=e.useMemo((()=>S(t.selector,n.data)),[t.selector,n.data]),c=e.useCallback((({targetRect:e,clipEl:n,viewportClipRect:s})=>{const a=function({beacon:e,beaconRef:t,clipEl:o,viewportClipRect:n,targetRect:s,theme:r}){if(!t.current)return null;if(0===s.width||0===s.height)return null;const l=r.beaconSize,a=r.beaconSize,i=R(o);let c=0,u=0;switch(e.placement){case"top-left":case"left":case"bottom-left":c=s.left;break;case"top":case"center":case"bottom":c=s.left+s.width/2;break;default:c=s.left+s.width}switch(e.placement){case"left":case"center":case"right":u=s.top+s.height/2;break;case"bottom-left":case"bottom":case"bottom-right":u=s.top+s.height;break;default:u=s.top}c-=l/2,u-=a/2,c+=e.offsetX,u+=e.offsetY,c=Math.max(c,i.left-(o===document.documentElement?0:o.scrollLeft)),u=Math.max(u,i.top-(o===document.documentElement?0:o.scrollTop));const d=c+l,p=u+a,m=Math.min(32,.5*a);let f;f=p<n.top+m?"up":u>n.bottom-m?"down":null;return{top:u,right:d,bottom:p,left:c,width:l,height:a,pointerSubjectPosition:{direction:f,left:c,width:l},visible:null==f}}({beacon:t,beaconRef:r,clipEl:n,viewportClipRect:s,targetRect:e,theme:o}),i=a&&function({subjectPosition:e,pointerRef:t,viewportClipRect:o}){const n=t.current;if(!n)return null;const s=n.getBoundingClientRect(),r=j(T());let l,a,i=e.direction;return null==i?null:("down"===i&&o.bottom<s.height/2?i="up":"up"===i&&o.top>r&&(i="down"),l=e.left+e.width/2-s.width/2,a="down"===i?o.bottom-s.height:o.top,{direction:i,left:l,top:a})}({subjectPosition:a.pointerSubjectPosition,pointerRef:l,viewportClipRect:s});C((()=>{K(r,a),G(l,i)}))}),[t]),u=e.useCallback((()=>{K(r,null),G(l,null)}),[]);return F({selector:a?null:i,targetMoved:c,targetLost:u}),e.createElement(e.Fragment,null,e.createElement("div",{ref:r,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:s+2}},e.createElement("div",{className:"userflowjs-beacon__ring"}),e.createElement("div",{className:"userflowjs-beacon__ring"})),e.createElement(Y,{ref:l}))};function K(e,t){const o=e.current;o&&(o.classList.toggle("userflowjs-fixed-widget--visible",null!=t),t&&(o.style.transform=`translate3d(${t.left}px, ${t.top}px, 0)`,o.style.visibility=t.visible?"visible":"hidden"))}const W=()=>{const{t:o}=q(),n=L(),{restart:l}=le(),{session:a,step:i}=ae(),c=i.theme||a.version.theme,u=i.selector,d=!u||u.type===s.AUTO&&!u.autoData,m=()=>n.endFlow(a,{endReason:t.USER_CLOSED});return e.createElement(e.Fragment,null,e.createElement(p,{draftMode:a.draftMode,close:m}),a.draftMode&&d?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 ",i.idx+1)," of"," ",e.createElement("b",null,a.flow.name),".")):a.draftMode&&c.tooltipMissingBehavior===r.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 ",i.idx+1)," of"," ",e.createElement("b",null,a.flow.name)," was not found within"," ",c.tooltipMissingToleranceSeconds," ",1===parseFloat(c.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"},a.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 ",i.idx+1)," of"," ",e.createElement("b",null,a.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,o("tooltipTargetMissing.line1"))),e.createElement("p",null,o("tooltipTargetMissing.line2"))),e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement(E,{appearance:"primary",onClick:l,text:o("menu.restart")}),e.createElement(E,{appearance:"default",onClick:m,text:o("menu.close")}))))},$=({session:o,checklistSession:n,resourceCenterEmbedsChecklist:s})=>{const d=L(),[p,m]=e.useState(!1),[f,b]=e.useState(null),[h,w]=e.useReducer(Z,void 0,(()=>{const e=o,t=ee(e);return{...Q,session:e,step:t,muted:!!l.getItem("flowsMuted"),autoFocusRequested:oe(t)}})),{session:g,step:E,speechPlaying:k,contentType:j}=h,{version:T}=g,R=ne(E);let F=0;E.questions.some((e=>e.type===i.NPS))&&(F=420);const C=P(E.theme||T.theme),I=e.useMemo((()=>{let e=C.bubbleY;const t=n?.version.theme;return!s&&n&&t&&n.version.checklist?.launcherEnabled&&E.appearance===a.BUBBLE&&t.checklistLauncherPlacement===C.bubblePlacement&&(C.avatarType===c.NONE||t.checklistLauncherX<C.bubbleX+C.avatarSize)&&(e=Math.max(C.bubbleY,t.checklistLauncherY+t.checklistLauncherHeight+C.bubbleY)),{...C,bubbleWidth:Math.max(C.bubbleWidth,F),bubbleY:e}}),[s,n,E.appearance,C,F]);e.useEffect((()=>{g!==o&&w({kind:"updateSession",session:o});const e=e=>{e.session.id===g.id&&w({kind:"goToStep",stepId:e.step.id})};return d.on("gotostep",e),()=>{d.off("gotostep",e)}}),[d,g,o]);const D=e.useMemo((()=>({dispatch:w,restart:()=>{d.goToStep(g,te(g)),w({kind:"showFlow"})}})),[d,w,g]),_=e.useMemo((()=>E.selector&&S(E.selector,g.data)),[E.selector,g.data]),B=e.useCallback((()=>{v(d,g,E.actions)}),[d,g,E.actions]);e.useEffect((()=>{h.muted?l.setItem("flowsMuted","true"):l.removeItem("flowsMuted")}),[h.muted]);const q=g.locale?g.locale.standardLocaleId:I.languageId;e.useEffect((()=>{M.changeLanguage(q)}),[q]);const[O,U]=e.useState(!1),z=e.useCallback((e=>{U(e),e&&d.send({kind:"ReportTooltipTargetMissing",sessionId:g.id,stepId:E.id}),e&&I.tooltipMissingBehavior===r.END&&!g.draftMode&&d.endFlow(g,{endReason:t.TOOLTIP_TARGET_MISSING})}),[d,g,E.id,I.tooltipMissingBehavior]);return e.useEffect((()=>{if(!p||!h.autoFocusRequested)return;d.originalActiveElement||d.originalActiveElement===f?.ownerDocument.defaultView?.frameElement||(d.originalActiveElement=document.activeElement);let e=f?.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=f?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");t&&(e=t)}e&&"function"==typeof e.focus&&e.focus({preventScroll:!0}),w({kind:"autoFocused"})}),[d,f,p,h.autoFocusRequested]),e.useEffect((()=>{const e=f?.ownerDocument.defaultView;if(!e)return;const t=()=>{w({kind:"focusOut"}),delete d.originalActiveElement},o=()=>{w({kind:"focusIn"})};return window.addEventListener("focusin",t),e.addEventListener("focusin",o),()=>{window.removeEventListener("focusin",t),e.removeEventListener("focusin",o)}}),[f,d]),e.useEffect((()=>{if(!R||!f)return;const e=f.ownerDocument.defaultView,o=e?e.document:document,n=e=>{if("Escape"!==e.key||T.closeDisabled){if("Tab"===e.key){const t=f.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),n=t[0],s=t[t.length-1],r=o.activeElement;e.shiftKey?r===n&&(e.preventDefault(),s.focus()):r===s&&(e.preventDefault(),n.focus())}}else d.endFlow(g,{endReason:t.USER_CLOSED})};return window.addEventListener("keydown",n),e?.addEventListener("keydown",n),()=>{window.removeEventListener("keydown",n),e?.removeEventListener("keydown",n)}}),[R,d,g,f,T.closeDisabled]),e.useEffect((()=>{if(h.scrollToTopRequested){if(f?.ownerDocument.defaultView?.frameElement){const e=f?.ownerDocument.body;e&&(e.scrollTop=0)}w({kind:"scrolledToTop"})}}),[h.scrollToTopRequested,f]),e.createElement(se.Provider,{value:D},e.createElement(re.Provider,{value:h},e.createElement(y.Provider,{value:g},e.createElement(N,null,e.createElement(x,{company:g.flow.company,theme:I,position:"fixed",stepKey:E.crossVersionId,stepAppearance:E.appearance,width:E.width,backgroundImageUrl:"flow"===j&&!O&&E.backgroundAsset?E.backgroundAsset.assetUrl:null,tooltipSelector:_,tooltipPlacement:E.tooltipPlacement,backdrop:E.backdrop,tooltipTargetBlocked:E.tooltipTargetBlocked,backdropPadding:E.backdropPadding,onTooltipTargetClick:B,onTooltipTargetMissingChange:z,onModalBackdropClick:E.appearance!==a.MODAL||I.modalBackdropOnclick!==u.DISMISS||T.closeDisabled?void 0:()=>d.endFlow(g,{endReason:t.USER_CLOSED}),speaking:k,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:m,bubbleFrameRootRef:b,rootChildren:t=>e.createElement(J,{...t,theme:I})},"menu"===j?e.createElement(A,null):O&&I.tooltipMissingBehavior!==r.BUBBLE?e.createElement(W,null):e.createElement(V,{theme:I}))))))},J=({visible:t,bubbleFrame:o,theme:n})=>{const s=ae(),{step:r}=s,l=s.session.currentStep&&s.session.currentStep.id,[a,i]=e.useState(!1),c=e.useRef(l);return e.useEffect((()=>{t?i(!0):c.current!==l&&i(!1),c.current=l}),[l,t]),e.createElement(e.Fragment,null,(t||a)&&"flow"===s.contentType&&e.createElement(e.Fragment,null,e.createElement(z,{bubbleFrame:o,theme:n}),e.createElement(H,{theme:n})),r.triggers.map((t=>e.createElement(B,{key:t.id,trigger:t}))))},Q={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Z(e,t){switch(t.kind){case"updateSession":{let o;return o=t.session.id===e.session.id&&t.session.version.steps.find((({crossVersionId:t})=>t===e.step.crossVersionId))||ee(t.session),{...e,session:t.session,step:o}}case"goToStep":{const o=e.session.version.steps.find((e=>e.id===t.stepId));return o?{...e,step:o,contentType:"flow",autoFocusRequested:e.hasFocus||oe(o),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 ee(e){const{currentStep:t}=e,{steps:o}=e.version;if(t){const e=o.find((({crossVersionId:e})=>e===t.crossVersionId));if(!e)throw new d("Session points to an unknown step: "+t.crossVersionId);return e}return te(e)}function te(e){const t=e.version.steps[0];if(!t)throw new d("Session has no current step and its version has no start step");return t}function oe(e){return ne(e)}function ne(e){return e.appearance===a.MODAL||e.appearance===a.BUBBLE&&e.backdrop||e.appearance===a.TOOLTIP&&e.tooltipTargetBlocked}const se=e.createContext(null),re=e.createContext(null);function le(){return e.useContext(se)}function ae(){return e.useContext(re)}export default $;export{$ as FlowApp,re as FlowStateContext,Q as initialFlowState,ne as isStepModal,le as useFlowDispatch,ae as useFlowState};
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};
2
2
  //# sourceMappingURL=FlowApp.js.map
package/bubble-frame.css CHANGED
@@ -245,8 +245,11 @@
245
245
  .userflowjs-theme-root blockquote:not(:last-child),
246
246
  .userflowjs-theme-root pre:not(:last-child),
247
247
  .userflowjs-theme-root ol:not(:last-child),
248
- .userflowjs-theme-root ul:not(:last-child),
249
- .userflowjs-theme-root .userflowjs-bubble-buttons:not(:last-child) {
248
+ .userflowjs-theme-root ul:not(:last-child) {
249
+ margin-bottom: 1rem;
250
+ }
251
+ .userflowjs-theme-root .userflowjs-bubble-buttons,
252
+ .userflowjs-theme-root:not(:last-child):not(:nth-last-child(2)) {
250
253
  margin-bottom: 1rem;
251
254
  }
252
255
  .userflowjs-theme-root p,
@@ -410,7 +413,8 @@
410
413
  width: 16px;
411
414
  height: 1em;
412
415
  }
413
- .userflowjs-bubble-progress {
416
+ /* Default progress bar */
417
+ .userflowjs-bubble-progress-DEFAULT {
414
418
  position: absolute;
415
419
  top: 0;
416
420
  left: 0;
@@ -418,6 +422,114 @@
418
422
  height: var(--userflow-progress-bar-height);
419
423
  overflow: hidden;
420
424
  }
425
+ .userflowjs-bubble-progress-DEFAULT.userflowjs-bubble-progress-bottom {
426
+ bottom: 0;
427
+ top: auto;
428
+ }
429
+ /* Chained progress bar (both rounded and squared) */
430
+ .userflowjs-bubble-progress-CHAINED {
431
+ position: relative;
432
+ top: 1px;
433
+ left: 0;
434
+ right: 0;
435
+ margin: 0 auto;
436
+ display: flex;
437
+ align-items: center;
438
+ justify-content: center;
439
+ overflow: hidden;
440
+ }
441
+ /* Rounded progress bar */
442
+ .userflowjs-bubble-progress-CHAINED_ROUNDED .rounded,
443
+ .userflowjs-bubble-progress-CHAINED_SQUARED .rounded {
444
+ height: var(--userflow-progress-bar-height, 30px);
445
+ display: flex;
446
+ align-items: center;
447
+ justify-content: center;
448
+ margin: 0 calc(var(--userflow-progress-bar-height) / 2);
449
+ transition: background-color 0.3s, border-color 0.3s;
450
+ border: 1px solid var(--userflow-widget-background-color);
451
+ }
452
+ .userflowjs-bubble-progress-CHAINED_ROUNDED .rounded {
453
+ width: calc(var(--userflow-progress-bar-height) * 2);
454
+ height: var(--userflow-rounded-progress-bar-height);
455
+ border-radius: 8px;
456
+ }
457
+ .userflowjs-bubble-progress-CHAINED_SQUARED .rounded {
458
+ width: calc(var(--userflow-progress-bar-height) * 3);
459
+ }
460
+ .userflowjs-bubble-progress-CHAINED_ROUNDED .rounded.completed,
461
+ .userflowjs-bubble-progress-CHAINED_SQUARED .rounded.completed {
462
+ background-color: var(--userflow-progress-bar-color, #00f);
463
+ color: var(--userflow-main-background-color);
464
+ border: 1px solid var(--userflow-widget-background-color);
465
+ }
466
+ /* Dotted progress bar */
467
+ .userflowjs-bubble-progress-DOTTED .rounded {
468
+ width: var(--userflow-dotted-progress-bar-height);
469
+ height: var(--userflow-dotted-progress-bar-height);
470
+ border-radius: 50%;
471
+ border: 1px solid var(--userflow-widget-background-color);
472
+ margin: 0 calc(var(--userflow-dotted-progress-bar-height) / 3);
473
+ transition: background-color 0.3s;
474
+ }
475
+ .userflowjs-bubble-progress-DOTTED .rounded.completed {
476
+ background-color: var(--userflow-progress-bar-color, #00f);
477
+ }
478
+ /* Narrow progress bar */
479
+ .userflowjs-bubble-progress-NARROW .linear-progress-bar {
480
+ width: 80px;
481
+ height: var(--userflow-narrow-progress-bar-height, 30px);
482
+ border: 1px solid var(--userflow-widget-background-color);
483
+ border-radius: var(--userflow-narrow-progress-bar-border-radius, 5px);
484
+ overflow: hidden;
485
+ position: relative;
486
+ }
487
+ .userflowjs-bubble-progress-NARROW .linear-progress-fill {
488
+ height: 100%;
489
+ background-color: var(--userflow-progress-bar-color, #00f);
490
+ transition: width 0.3s;
491
+ }
492
+ /* Numbered progress bar */
493
+ .userflowjs-bubble-progress-NUMBERED .numbered-progress {
494
+ font-size: var(--userflow-numbered-progress-bar-height);
495
+ font-weight: bold;
496
+ color: var(--userflow-progress-bar-color, #00f);
497
+ display: flex;
498
+ align-items: center;
499
+ justify-content: center;
500
+ text-align: center;
501
+ margin: 0 auto;
502
+ }
503
+ /* Common styling for progress bar elements */
504
+ .userflowjs-bubble-progress-CHAINED_ROUNDED .rounded,
505
+ .userflowjs-bubble-progress-CHAINED_SQUARED .rounded {
506
+ display: flex;
507
+ align-items: center;
508
+ justify-content: center;
509
+ margin: 0 calc(var(--userflow-progress-bar-height) / 2);
510
+ transition: background-color 0.3s, border-color 0.3s;
511
+ border: 1px solid var(--userflow-widget-background-color);
512
+ }
513
+ /* Rounded progress bar styling */
514
+ .userflowjs-bubble-progress-CHAINED_ROUNDED .rounded {
515
+ width: calc(var(--userflow-rounded-progress-bar-height) * 2);
516
+ height: var(--userflow-rounded-progress-bar-height);
517
+ margin: 0 calc(var(--userflow-rounded-progress-bar-height) / 2);
518
+ border-radius: 8px;
519
+ }
520
+ /* Squared progress bar styling */
521
+ .userflowjs-bubble-progress-CHAINED_SQUARED .rounded {
522
+ width: calc(var(--userflow-squared-progress-bar-height) * 3);
523
+ height: var(--userflow-squared-progress-bar-height);
524
+ margin: 0 calc(var(--userflow-squared-progress-bar-height) / 2);
525
+ }
526
+ /* Completed state styling */
527
+ .userflowjs-bubble-progress-CHAINED_ROUNDED .rounded.completed,
528
+ .userflowjs-bubble-progress-CHAINED_SQUARED .rounded.completed {
529
+ background-color: var(--userflow-progress-bar-color, #00f);
530
+ color: var(--userflow-main-background-color);
531
+ border: 1px solid var(--userflow-widget-background-color);
532
+ }
421
533
  .userflowjs-bubble-progress__fill {
422
534
  width: 0%;
423
535
  height: 100%;
@@ -1723,32 +1835,6 @@ a.userflowjs-resource-center-block--clickable:hover {
1723
1835
  height: var(--userflow-line-height);
1724
1836
  line-height: var(--userflow-line-height);
1725
1837
  }
1726
- .userflowjs-resource-center-code-block {
1727
- display: flex;
1728
- width: var(--userflow-line-height);
1729
- height: var(--userflow-line-height);
1730
- justify-content: center;
1731
- align-items: center;
1732
- }
1733
- .userflowjs-resource-center-code-block div {
1734
- display: flex;
1735
- width: 1rem;
1736
- height: 1rem;
1737
- margin-left: -4px;
1738
- justify-content: center;
1739
- align-items: center;
1740
- flex-shrink: 0;
1741
- border-radius: 0.25rem;
1742
- background: #f3f3f4;
1743
- }
1744
- .userflowjs-resource-center-code-block code {
1745
- color: #82858e;
1746
- font-size: 10px;
1747
- font-style: normal;
1748
- font-weight: 860;
1749
- line-height: 8px;
1750
- background-color: transparent;
1751
- }
1752
1838
  [dir="ltr"] .userflowjs-unread-dot {
1753
1839
  margin-right: 0.375rem;
1754
1840
  }
@@ -1,2 +1,2 @@
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]="c4072862-5263-4ed6-87bc-80e91cf48fe7",e._sentryDebugIdIdentifier="sentry-dbid-c4072862-5263-4ed6-87bc-80e91cf48fe7")}catch(n){}}();import{r as e}from"./vendor.react.js";import{c as t,b as n,i as r,d as l}from"./flow-condition-types.js";import{b as o,D as a}from"./stylesheets.js";import{o as i}from"./vendor.obj-str.js";import{c as s,s as u,r as c,m as d,v as m,S as b,E as p,w as f,U as h,x as w,d as g}from"./userflow.js";import{f as v}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{u as E}from"./vendor.react-i18next.js";import{u as y}from"./client-context.js";const k=e.createContext(null);function _(){const t=e.useContext(k);if(!t)throw new Error("useSession: Session was not set");return t}function x(n){const r=_(),[l,a]=e.useState(!1),i=o(r.data),s=function(t){const n=e.useRef(t),r=e.useRef(t);return t!==r.current&&JSON.stringify(t)!==JSON.stringify(r.current)&&(n.current=t),r.current=t,n.current}(n);return e.useLayoutEffect((()=>{if(s){return t[s.type].track({sessionData:i,condition:s,callback:e=>{a(e)}})}}),[i,s]),null!=s&&l}const j=({appearance:t,hidden:n,disabled:r,onMouseDown:l,onClick:o,text:a,active:s,children:u})=>e.createElement("button",{className:i({[se(t)]:!0,"userflowjs-bubble-button--hidden":!!n,"userflowjs-bubble-button--active":!!s}),onMouseDown:l,onClick:o,disabled:r},u||e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},a));function q(e){const t=c();t!==new URL(e,t).toString()&&(s.customNavigate?s.customNavigate(e):window.setTimeout((()=>{u(e)}),0))}async function S(e,t,l){const{steps:o}=t.version;switch(l.type){case d.CLOSE_FLOW:switch(t.kind){case"launcher":await e.dismissLauncher(t,{endReason:p.ACTION});break;case"banner":case"flow":case"checklist":await e.endFlow(t,{endReason:p.ACTION})}return;case d.EVAL_JS:if(s.evalJsDisabled)return void console.error('Userflow.js: Blocked "Evaluate JavaScript" action from running, since userflow.disableEvalJs() has been called.');try{const e=r(l.code||"",t.data);new Function('"use strict";\n'+e)()}catch(a){console.error(`Userflow.js: Evaluate JavaScript action failed.\n\nError:\n${a.stack||a.message||a}\n\nCode:\n${l.code}`)}return;case d.GO_TO_STEP:{if("flow"!==t.kind)return;const n=o.find((({crossVersionId:e})=>e===l.stepCvid));if(!n)throw new h("Action points to unknown step: "+l.stepCvid);return void(await e.goToStep(t,n))}case d.NAVIGATE:{if(!l.url)return void console.warn("Userflow.js: NAVIGATE action is missing url property");const e=M(l.url,{lookupAttribute:n(t.data)});return void(l.navigateTarget===m.NEW_TAB?window.open(e):q(e))}case d.SET_ATTRIBUTE:{let t;const n=l.attributeValue||"";switch(l.attributeOperation){case f.SET:t={set:n};break;case f.SET_DATETIME:t={set:(new Date).toISOString()};break;case f.SET_DATETIME_ONCE:t={set_once:(new Date).toISOString()};break;case f.SET_ONCE:t={set_once:n};break;case f.ADD:t={add:n};break;case f.SUBTRACT:t={subtract:n};break;case f.APPEND:t={append:n};break;case f.PREPEND:t={prepend:n};break;case f.REMOVE:t={remove:n};break;case f.UNSET:t={set:null};break;default:return}const r=l.attributeFqn||"",o=r.split("/");return void(1===o.length?e.updateUser({[r]:t}):"group"===o[0]?e.updateGroup({[o[1]]:t}):"group_membership"===o[0]&&e.updateGroup({},{membership:{[o[1]]:t}}))}case d.SNOOZE:return void("flow"===t.kind&&l.timeValue&&l.timeUnit&&(e.endFlow(t,{endReason:p.SNOOZED,batch:!0}),t.draftMode?window.alert(`In preview mode, flows can't be snoozed.\n\nBut if this flow was running in published mode, the flow would now be snoozed for ${l.timeValue} ${l.timeUnit.toLowerCase()+(1===l.timeValue?"":"s")}.`):e.send({kind:"Snooze",flowId:t.flow.id,timeValue:l.timeValue,timeUnit:l.timeUnit},{batch:!0})));case d.START_FLOW:return"launcher"===t.kind&&e.deactivateLauncher(t),void(l.otherFlow?await e.startFlow({flowId:l.otherFlow.id,stepCvid:l.otherFlowStepCvid,startReason:t.draftMode?b.DRAFT:b.ACTION,replaceCurrent:!0}):console.warn("Userflow.js: START_FLOW action is missing other flow"))}}async function N(e,t,n){const r=[],l=[],o=[];for(const a of n)a.type===d.NAVIGATE?a.navigateTarget===m.NEW_TAB?r.push(a):o.push(a):l.push(a);for(const a of r)S(e,t,a);await Promise.all(l.map((n=>S(e,t,n))));for(const a of o)S(e,t,a)}const T=({button:t})=>{const n=y(),l=_(),o=x(t.disabledCondition),a=x(t.hiddenCondition);return e.createElement(j,{appearance:t.appearance,hidden:a,disabled:o,onClick:()=>N(n,l,t.actions),text:r(t.text,l.data)})},C=()=>e.createElement("svg",{viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg"},e.createElement("polygon",{className:"userflowjs-star-shape",fill:"#fff",points:"16 22.7785728 7.18322122 29.1352549 10.5042507 18.7856772 1.73415226 12.3647451 12.6034401 12.3250364 16 2 19.3965599 12.3250364 30.2658477 12.3647451 21.4957493 18.7856772 24.8167788 29.1352549"})),I=({type:t,required:n,placeholder:r,buttonText:l,options:o,otherOption:s,multipleSelection:u,shuffleOptions:c,labelLeft:d,labelCenter:m,labelRight:b,minValue:p,maxValue:f,onSubmit:h,inert:g})=>{const{t:y}=E(),k=e.useRef(null),[_,x]=e.useState(""),[j,q]=e.useState(new Set),[S,N]=e.useState(),[T,I]=e.useState(),[P,L]=e.useState(!1),[$,R]=e.useState(!1),[M,O]=e.useState(null),F=e.useMemo((()=>o&&(c?[...o].sort((()=>Math.random()-.5)):o)),[o,c]),D=e=>{if(!g&&h){if(n&&""===_&&[w.MULTILINE_TEXT,w.TEXT].includes(t))return O(y("question.requiredError")),void U();R(!0),O(null),h({...e,onCancel:()=>{R(!1)},onError:e=>{R(!1),O(e||"Sorry, something went wrong saving your answer. Please try again.")}})}},U=e.useCallback((()=>{!g&&k.current&&k.current.focus()}),[g]),[B,W]=e.useState(!1);e.useEffect((()=>{B&&(U(),W(!1))}),[U,B]);const V=e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--primary",onClick:()=>D({answer:{kind:"text",value:_}}),tabIndex:g?-1:void 0,disabled:$},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},l||y("question.submit"))));let J=null,K=0;if(t===w.NPS)d=d||y("question.npsLabelLeft"),b=b||y("question.npsLabelRight"),J=[0,1,2,3,4,5,6,7,8,9,10],K=J.length;else if([w.SCALE,w.STARS].includes(t)){f=null!=f?f:5,J=[];for(let e=p=null!=p?p:1;e<=f;e++)J.push(e);K=J.length}else t===w.MULTIPLE_CHOICE&&(K=(F?F.length:0)+(s&&!P?1:0));const[z,G]=e.useState(-1),H=-1===z?-1:Math.min(z,K-1),X=e=>{if(!e.target.closest('[role="radio"], [role="checkbox"], [role="radiogroup"], [role="group"]'))return;let t=null;if("ArrowRight"===e.key||"ArrowDown"===e.key?t=1:"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||(t=-1),null!=t){e.preventDefault();const n=e.currentTarget.querySelectorAll('[role="radio"], [role="checkbox"]');let r=H+t;r<0?r=n.length-1:r>n.length-1&&(r=0),G(r),n[r].focus()}};let Q,Z=null,Y=null;if(J&&(d||m||b)){const t=[];d&&t.push(J[0],d),b&&t.push(J[J.length-1],b),Z=e.createElement("div",{id:"a11y-scale-labels",className:"userflowjs-a11y-only"},t.join(", ")),Y=e.createElement("div",{id:"userflowjs-bubble-question-labels",className:"userflowjs-bubble-question__scale-labels","aria-hidden":"true"},e.createElement("div",{className:"userflowjs-bubble-question__scale-label"},d),m&&e.createElement("div",{className:"userflowjs-bubble-question__scale-label userflowjs-bubble-question__scale-label--center"},m),e.createElement("div",{className:"userflowjs-bubble-question__scale-label userflowjs-bubble-question__scale-label--right"},b))}switch(t){case w.MULTILINE_TEXT:Q=e.createElement(e.Fragment,null,e.createElement("textarea",{ref:k,className:"userflowjs-textarea userflowjs-bubble-question__textarea",value:_,onChange:e=>x(e.target.value),onKeyDown:e=>{(e.ctrlKey||e.metaKey)&&"Enter"===e.key&&D({answer:{kind:"text",value:_}})},placeholder:r||y("question.placeholder"),readOnly:g||$,tabIndex:g?-1:void 0,rows:3,"aria-required":n?"true":void 0,"aria-invalid":null!=M?"true":void 0}),V);break;case w.MULTIPLE_CHOICE:{const t=()=>{_&&D({answer:{kind:"text",value:_},animationPromise:A()})},n=(F?.length||0)+(s?1:0),o=Math.max(0,Math.min(n,null==p?1:p)),c=Math.max(0,Math.min(n,null==f?n:f)),d=()=>{const e=(F||[]).filter(((e,t)=>j.has(t))).map((e=>e.value));s&&P&&""!==_&&e.push(_),o!==c||e.length===o?e.length<o?O(y("question.multiple_selection_too_few",{count:o})):e.length>c?O(y("question.multiple_selection_too_many",{count:c})):D({answer:{kind:"list",values:e}}):O(y("question.multiple_selection_wrong",{count:o}))};Q=e.createElement(e.Fragment,null,u&&e.createElement("div",{className:i({"userflowjs-bubble-question__multiple-choice-hint":!0,"userflowjs-bubble-question__multiple-choice-hint--error":!!M})},y("question.multiple_selection_hint",{replace:{selected:j.size+(s&&P&&""!==_?1:0),range:o===c?o:`${o}-${c}`}}),M&&e.createElement(e.Fragment,null,". ",e.createElement("span",{role:"alert"},M))),e.createElement("div",{className:i({"userflowjs-bubble-question__multiple-choice":!0,"userflowjs-bubble-question__multiple-choice--single-selection":!u,"userflowjs-bubble-question__multiple-choice--multiple-selection":!!u}),role:u?"group":"radiogroup",tabIndex:g||-1!==H?-1:0,onKeyDown:X},F?.map((({value:t,label:n},r)=>e.createElement("button",{key:r,className:i({"userflowjs-bubble-question__multiple-choice-option":!0,"userflowjs-bubble-question__multiple-choice-option--selected":u?j.has(r):$&&!P&&_==t}),onClick:$?void 0:()=>{if(u){O(null);const e=new Set(j);j.has(r)?e.delete(r):e.add(r),q(e)}else L(!1),x(t),D({answer:{kind:"text",value:t},animationPromise:A()})},disabled:$,tabIndex:g||r!==H?-1:0,role:u?"checkbox":"radio","aria-label":n||t,"aria-checked":!P&&_==t},u?e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox-inner"},e.createElement(a,{icon:v}))):e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio-inner"})),e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-option-text","aria-hidden":"true"},n||t)))),s&&(P?e.createElement("div",{className:i({"userflowjs-bubble-question__multiple-choice-option":!0,"userflowjs-bubble-question__multiple-choice-option--other":!0,"userflowjs-bubble-question__multiple-choice-option--selected":u?""!=_:$})},u?e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox",onClick:()=>{x(""),L(!1)}},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox-inner"},e.createElement(a,{icon:v}))):e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio-inner"})),e.createElement("input",{ref:k,className:"userflowjs-bubble-question__multiple-choice-option-input",value:_,onChange:e=>x(e.target.value),onKeyDown:e=>{e.shiftKey||"Enter"!==e.key?"Escape"===e.key&&(e.stopPropagation(),x(""),L(!1)):u?d():t()},onBlur:()=>{""===_&&L(!1)},placeholder:r||y("question.placeholder"),readOnly:g||$,tabIndex:g?-1:void 0}),!u&&e.createElement("button",{"data-testid":"multiple-choice-other-submit",className:"userflowjs-bubble-question__multiple-choice-option-submit",onClick:()=>t(),disabled:$,"aria-label":y("question.submit")},e.createElement(a,{icon:v}))):e.createElement("button",{className:"userflowjs-bubble-question__multiple-choice-option",onClick:$?void 0:()=>{O(null),L(!0),W(!0)},disabled:$,tabIndex:g||F?.length!==H?-1:0,role:"radio","aria-label":y("question.other"),"aria-checked":"false"},u?e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox-inner"},e.createElement(a,{icon:v}))):e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio-inner"})),e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-option-text","aria-hidden":"true"},y("question.other"))))),u&&e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--primary",onClick:d,tabIndex:g?-1:void 0,disabled:$},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},l||y("question.submit")))));break}case w.NPS:case w.SCALE:Q=e.createElement(e.Fragment,null,Z,e.createElement("div",{className:"userflowjs-bubble-question__scale-options",role:"radiogroup",tabIndex:g||-1!==H?-1:0,onKeyDown:X},J?.map(((t,n)=>e.createElement("button",{className:i({"userflowjs-bubble-question__scale-option":!0,"userflowjs-bubble-question__scale-option--selected":$&&S==t}),key:t,tabIndex:g||n!==H?-1:0,onClick:()=>{N(t),D({answer:{kind:"number",value:t},animationPromise:A()})},disabled:$,role:"radio","aria-checked":S==t},t)))),Y);break;case w.STARS:Q=e.createElement("div",{className:"userflowjs-bubble-question__stars-wrapper"},Z,e.createElement("div",{className:"userflowjs-bubble-question__stars",role:"radiogroup",tabIndex:g||-1!==H?-1:0,onKeyDown:X},J?.map(((t,n)=>e.createElement("button",{className:i({"userflowjs-bubble-question__star":!0,"userflowjs-bubble-question__star--hovered":!$&&null!=T&&T>=t,"userflowjs-bubble-question__star--selected":$&&null!=S&&S>=t,"userflowjs-bubble-question__star--not-selected":$&&null!=S&&S<t}),key:t,tabIndex:g||n!==H?-1:0,onClick:()=>{N(t),D({answer:{kind:"number",value:t},animationPromise:A()})},onMouseOver:()=>I(t),onMouseLeave:()=>I(null),disabled:$,role:"radio","aria-checked":S==t,"aria-label":String(t)},e.createElement("div",{className:"userflowjs-bubble-question__star-icon","aria-hidden":"true"},e.createElement(C,null)),e.createElement("div",{className:"userflowjs-bubble-question__star-value","aria-hidden":"true"},t))))),Y);break;case w.TEXT:Q=e.createElement(e.Fragment,null,e.createElement("input",{ref:k,className:"userflowjs-text-input userflowjs-bubble-question__text-input",value:_,onChange:e=>x(e.target.value),onKeyDown:e=>{e.shiftKey||"Enter"!==e.key||D({answer:{kind:"text",value:_}})},placeholder:r||y("question.placeholder"),readOnly:g||$,tabIndex:g?-1:void 0,"aria-required":n?"true":void 0,"aria-invalid":null!=M?"true":void 0}),V)}return e.createElement("div",{className:"userflowjs-bubble-question",style:{pointerEvents:g?"none":void 0}},M&&!(t===w.MULTIPLE_CHOICE&&u)&&e.createElement("div",{className:"userflowjs-bubble-question__error",role:"alert"},M),Q)};function A(){return new Promise((e=>window.setTimeout(e,250)))}const P=({question:t})=>{const n=y(),r=function(){const e=_();if("flow"!==e.kind)throw new Error("useFlowSession: Wrong session kind");return e}();return e.createElement(I,{type:t.type,required:!!t.required,placeholder:t.placeholder||"",buttonText:t.buttonText||"",options:t.options,otherOption:t.otherOption,multipleSelection:t.multipleSelection,shuffleOptions:t.shuffleOptions,labelLeft:t.labelLeft||"",labelCenter:t.labelCenter||"",labelRight:t.labelRight||"",minValue:t.minValue,maxValue:t.maxValue,onSubmit:async e=>{g("answerQuestion",r.id,t.cvid,e);const{answer:l}=e;try{await Promise.all([await n.send({kind:"AnswerQuestion",sessionId:r.id,questionName:t.name,questionCvid:t.cvid,textAnswer:"text"==l.kind?l.value:null,numberAnswer:"number"==l.kind?String(l.value):null,listAnswer:"list"==l.kind?l.values:null}),e.animationPromise])}catch(a){return console.log("Userflow.js: Error when answering question:",a),void e.onError()}const{bindAttributeFqn:o}=t;if(o&&n.flowSession?.id===r.id){let e;switch(l.kind){case"text":e={name:o,value:l.value};break;case"number":e={name:o,value:String(l.value)};break;case"list":e={name:o,value:l.values}}n.optimisticClockUIUpdate((()=>{n.setFlowSession({...r,data:[...r.data.filter((e=>e.name!==o)),e]})}))}N(n,r,t.actions)}})},L=({text:t})=>{if(!t)return null;const n=t.split(/\n/);return 1===n.length?e.createElement(e.Fragment,null,n[0]):e.createElement(e.Fragment,null,n.map(((t,n)=>e.createElement(e.Fragment,{key:n},n>0&&e.createElement("br",null),t))))};function $(e=""){return{type:"paragraph",children:[{text:e}]}}function R(e){if(e){let n;try{n=JSON.parse(e)}catch(t){throw new Error("Could not JSON.parse rich content doc: "+e)}if("rich2"===n.type)return n;throw new Error("Could not recognize rich content doc: "+e)}return function(e=""){return{type:"rich2",children:[$(e)]}}()}function M(e,{lookupAttribute:t}){if(!e)return"";"string"==typeof e&&(e=function(e){if(e){let n;try{n=JSON.parse(e)}catch(t){throw new Error("Could not JSON.parse plaintext doc: "+e)}if("plaintext2"===n.type)return n;throw new Error("Could not recognize plaintext doc: "+e)}return function(e=""){return{type:"plaintext2",children:[{type:"plaintext",children:[{text:e}]}]}}()}(e));const n=[];function r(e){e&&e.forEach((e=>e&&function(e){if(le(e))e.text&&n.push(e.text);else switch(e.type){case"attribute":{const r=te(e,t);r&&n.push(r);break}default:r(e.children)}}(e)))}return r(e.children),n.join("")}function O(e){let t=!0;if(!e)return!0;"string"==typeof e&&(e=R(e));const n=new Set(["attribute","button","image","question","video"]);return oe(e,(e=>{le(e)?""!==e.text&&(t=!1):"type"in e&&n.has(e.type)&&(t=!1)})),t}const F=e.memo((({doc:t,...n})=>t?("string"==typeof t&&(t=R(t)),e.createElement(D,{parent:t,...n})):null)),D=({parent:t,...n})=>e.createElement(e.Fragment,null,t.children.map(((r,l)=>le(r)?e.createElement(U,{key:l,node:r}):e.createElement(W,{key:l,node:r,parent:t,...n})))),U=({node:t})=>t.text?e.createElement(B,{node:t},e.createElement(L,{text:t.text})):null,B=({node:t,children:n})=>(t.color&&"string"==typeof t.color&&(n=e.createElement("span",{style:{color:t.color}},n)),t.bold&&(n=e.createElement("b",null,n)),t.italic&&(n=e.createElement("i",null,n)),t.underline&&(n=e.createElement("u",null,n)),t.strikeThrough&&(n=e.createElement("s",null,n)),t.code&&(n=e.createElement("code",null,n)),t.small&&(n=e.createElement("small",null,n)),t.sup&&(n=e.createElement("sup",null,n)),n),W=({node:t,parent:n,...r})=>{const{lookupAttribute:l}=r,o=e.createElement(D,{parent:t,...r});switch(t.type){case"attribute":return e.createElement(V,{node:t,...r});case"button":return e.createElement(J,{node:t,...r});case"button-group":return e.createElement("div",{className:"userflowjs-bubble-buttons",style:{justifyContent:t.align}},o);case"column":return e.createElement("div",{style:Y(t,n)},o);case"column-group":return e.createElement("div",{className:"p-like",style:Z(t)},o);case"container":return e.createElement("div",{className:"p-like"+(t.className?` ${t.className}`:""),style:ee(t)},o);case"image":return e.createElement(z,{node:t,...r});case"link":return e.createElement("a",{href:M(t.href,{lookupAttribute:l}),target:"same"===t.target?"_top":"_blank",rel:"noopener noreferrer"},o);case"paragraph":return e.createElement("p",{className:X(t)},o);case"heading1":return e.createElement("h1",{className:X(t)},o);case"heading2":return e.createElement("h2",{className:X(t)},o);case"question":return e.createElement(K,{node:t,...r});case"quote":return e.createElement("blockquote",null,o);case"code-block":return e.createElement("pre",null,e.createElement("code",null,o));case"ordered-list":return e.createElement("ol",null,o);case"unordered-list":return e.createElement("ul",null,o);case"list-item":return e.createElement("li",null,o);case"video":return e.createElement(G,{node:t,...r});default:return e.createElement("div",null,o)}},V=({node:t,lookupAttribute:n})=>{let r=te(t,n);return e.createElement(B,{node:t},r)},J=({node:t,buttons:n})=>{const r=n?.find((e=>e.cvid===t.cvid));return r?e.createElement(T,{key:r.id,button:r}):null},K=({node:t,questions:n})=>{const r=n?.find((e=>e.cvid===t.cvid));return r?e.createElement(P,{key:r.id,question:r}):null},z=({node:t,lookupAttribute:n})=>{const{src:r,widthMode:o,displayWidth:a,width:i,height:s,marginTop:u,marginRight:c,marginBottom:d,marginLeft:m,align:b,hasLink:p,href:f}=t;if("string"!=typeof r||!r)return null;const{wrapperStyle:h,blockStyle:w}=Q({widthMode:o,displayWidth:a,width:i,height:s,marginTop:u,marginRight:c,marginBottom:d,marginLeft:m,align:b});let g=e.createElement("img",{src:l(r,(e=>encodeURIComponent((n?n(e):"")||""))),style:{...w,objectFit:"contain"},alt:""});return p&&f&&(g=e.createElement("a",{href:M(f,{lookupAttribute:n}),target:"same"===t.target?"_top":"_blank",rel:"noopener noreferrer",style:w},g)),e.createElement("div",{className:"p-like"},e.createElement("div",{style:h},g))},G=({node:t,lookupAttribute:n})=>{const{url:r,widthMode:l,displayWidth:o,width:a,height:i,marginTop:s,marginRight:u,marginBottom:c,marginLeft:d,align:m}=t;if("string"!=typeof r||!r)return null;const{wrapperStyle:b,blockStyle:p}=Q({widthMode:l,displayWidth:o,width:a,height:i,marginTop:s,marginRight:u,marginBottom:c,marginLeft:d,align:m});return e.createElement("div",{className:"p-like"},e.createElement("div",{style:b},e.createElement("div",{style:p},e.createElement(H,{element:t,noFocus:!0,lookupAttribute:n}))))},H=({element:{embedType:t,url:n,src:r,autoPlay:o,controls:a,loop:i,muted:s},noFocus:u,forceMuted:c,lookupAttribute:d})=>{if(!n)return null;const m={width:"100%",height:"100%",allow:"accelerometer; autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,allowtransparency:"true",mozallowfullscreen:"true",webkitallowfullscreen:"true",oallowfullscreen:"true",msallowfullscreen:"true",style:{display:"block",border:"none"},tabIndex:u?-1:void 0};if("video"===t)return e.createElement("video",{key:n+";"+String(o)+";"+String(a)+";"+String(i)+";"+String(s),src:n,style:{width:"100%",height:"100%",display:"block"},autoPlay:!!o,controls:!1!==a,loop:i,muted:c||s});if(r){let t;try{t=new URL(r)}catch(w){return null}return c&&(t.searchParams.has("autoplay")||t.searchParams.has("autoPlay"))&&(t.searchParams.set("mute","1"),t.searchParams.set("muted","1"),t.searchParams.set("volume","0")),e.createElement("iframe",{src:t.toString(),...m})}let b=function(e,{iframeFallback:t}={}){let n;try{n=new URL(e)}catch(w){return{kind:"invalid"}}const{hostname:r,pathname:l,searchParams:o}=n;if(r.match(/^(www\.)?(use)?loom\.com$/)){const e=l.match(/^\/share\/([a-z0-9]+)$/i);if(e){const[,t]=e;return{kind:"ok",videoProvider:"loom",videoId:t,searchParams:o}}}if(e.startsWith("raw:")){return{kind:"ok",videoProvider:"raw",videoId:e.replace(/^raw:/,""),searchParams:o}}if(e.startsWith("iframe:")){return{kind:"ok",videoProvider:"iframe",videoId:e.replace(/^iframe:/,""),searchParams:o}}if(["youtube.com","www.youtube.com"].includes(r)){const e=o.get("v");if(e)return o.delete("v"),{kind:"ok",videoProvider:"youtube",videoId:e,searchParams:o}}if("youtu.be"===r){const e=l.match(/^\/([^/]+)$/);if(e){const[,t]=e;return{kind:"ok",videoProvider:"youtube",videoId:t,searchParams:o}}}if("vimeo.com"===r){const e=l.match(/^\/(\d+)$/);if(e){const[,t]=e;return{kind:"ok",videoProvider:"vimeo",videoId:t,searchParams:o}}}if("player.vimeo.com"===r){const e=l.match(/^\/video\/([^/]+)$/);if(e){const[,t]=e;return{kind:"ok",videoProvider:"vimeo",videoId:t,searchParams:o}}}if(r.match(/^[^.]+\.wistia.com$/)){const e=l.match(/^\/medias\/([^/]+)$/);if(e){const[,t]=e;return{kind:"ok",videoProvider:"wistia",videoId:t,searchParams:o}}}return t?{kind:"ok",videoProvider:"iframe",videoId:e,searchParams:o}:{kind:"invalid"}}(n,{iframeFallback:!0});if("invalid"===b.kind)return null;const{videoProvider:p,videoId:f,searchParams:h}=b;switch(o=o||h.has("autoplay")||h.has("autoPlay"),p){case"iframe":return e.createElement("iframe",{src:l(f,(e=>encodeURIComponent((d?d(e):"")||""))),scrolling:h.get("scrolling")||void 0,...m});case"loom":return e.createElement("iframe",{src:`https://www.loom.com/embed/${f}?${h.toString()}`,...m});case"raw":return e.createElement("video",{src:f,controls:!0,style:{width:"100%",height:"100%",display:"block"},autoPlay:h.has("autoplay"),muted:c||h.has("muted")});case"youtube":return c&&o&&h.set("mute","1"),e.createElement("iframe",{src:`https://www.youtube.com/embed/${f}?${h.toString()}`,...m});case"vimeo":return c&&o&&h.set("muted","1"),e.createElement("iframe",{src:`https://player.vimeo.com/video/${f}?${h.toString()}`,...m});case"wistia":return h.set("videoFoam","true"),c&&o&&h.set("volume","0"),e.createElement(e.Fragment,null,e.createElement("iframe",{src:`https://fast.wistia.net/embed/iframe/${f}?${h.toString()}`,...m}))}};function X(e){return"right"===e.align?"userflowjs-text-align-end":"center"===e.align?"userflowjs-text-align-center":"justify"===e.align?"userflowjs-text-align-justify":""}function Q({widthMode:e,displayWidth:t,width:n,height:r,marginTop:l,marginRight:o,marginBottom:a,marginLeft:i,align:s}){const u={position:"relative"};"number"!=typeof t&&(t=100,e="percent"),"center"===s?(u.marginLeft="auto",u.marginRight="auto"):"right"===s&&(u.marginLeft="auto");let c=0;if(null!=l&&"number"==typeof l&&(u.marginTop=`${l}px`),null!=o&&"number"==typeof o&&(u.marginRight=`${o}px`,c+=o),null!=a&&"number"==typeof a&&(u.marginBottom=`${a}px`),null!=i&&"number"==typeof i&&(u.marginLeft=`${i}px`,c+=i),"number"!=typeof t||"number"!=typeof n||"number"!=typeof r)u.width="100px",u.height="100px";else if("px"===e){const e=10,l=Math.max(e,t);u.width=`${l}px`,u.height=l/(n/r)+"px"}else{const e=Math.max(0,Math.min(100,t));u.width=`calc(${e}% - ${c}px)`,u.height="0",u.paddingBottom=`calc((${e}% - ${c}px) / (${n} / ${r})`}return{wrapperStyle:u,blockStyle:{position:"absolute",top:"0",left:"0",display:"block",width:"100%",height:"100%"}}}function Z(e){return{display:"flex",alignItems:"stretch",marginRight:`-${null==e.spacing?16:e.spacing}px`}}function Y(e,t){const n="fill"===e.widthMode||null==e.displayWidth;return{display:"flex",flexDirection:"column",justifyContent:e.justifyContent,width:n?void 0:"px"===e.widthMode?`${e.displayWidth||50}px`:"percent"===e.widthMode?`${e.displayWidth||50}%`:void 0,flex:n?"1 0 0":void 0,marginRight:`${null==t.spacing?16:t.spacing}px`,marginBottom:"0"}}function ee(e){return{display:"flex",flexDirection:"column",justifyContent:e.justifyContent,width:"px"===e.widthMode&&null!=e.displayWidth?`${e.displayWidth}px`:"percent"===e.widthMode&&null!=e.displayWidth?`${e.displayWidth}%`:void 0,minHeight:"px"===e.heightMode?`${e.displayHeight||50}px`:void 0,flex:"fill"===e.heightMode?"1 0 0":void 0,marginTop:null!=e.marginTop?`${e.marginTop}px`:void 0,marginRight:null!=e.marginRight?`${e.marginRight}px`:"fill"!==e.widthMode&&"center"===e.align?"auto":void 0,marginBottom:null!=e.marginBottom?`${e.marginBottom}px`:void 0,marginLeft:null!=e.marginLeft?`${e.marginLeft}px`:"fill"===e.widthMode||"center"!==e.align&&"right"!==e.align?void 0:"auto"}}function te(e,t){if(!t)return null;const n=e.attributeName;if("string"==typeof n){const r=t(n)||e.fallback;if("string"==typeof r)return r}return null}function ne(e){return Array.isArray(e.children)&&void 0===e.addMark}function re(e,t,n="type"){return ne(e)&&e[n]===t}function le(e){return"string"==typeof e.text}function oe(e,t){function n(e){e&&e.forEach(((e,r)=>e&&function(e,r){t(e,r),ne(e)&&n(e.children)}(e,r)))}n(Array.isArray(e)?e:e.children)}const ae=e.memo((({doc:t,lookupAttribute:n})=>t?e.createElement(e.Fragment,null,M(t,{lookupAttribute:n})):null));function ie(e,{buttons:t,questions:n}){const r=new Set,l=new Set;if(oe(e,(e=>{re(e,"button")&&r.add(e.cvid),re(e,"question")&&l.add(e.cvid)})),n){const t=n.filter((e=>!l.has(e.cvid)));t.length>0&&(e={...e,children:[...e.children,...t.map((e=>({type:"question",cvid:e.cvid,children:[{text:""}]})))]})}if(t){const n=t.filter((e=>!r.has(e.cvid)));n.length>0&&(e={...e,children:[...e.children,{type:"button-group",children:n.map((e=>({type:"button",cvid:e.cvid,children:[{text:""}]})))}]})}return e}function se(e){return"userflowjs-bubble-button "+("primary"===(e=e||"default")||"PRIMARY"===e||"default"===e||"DEFAULT"===e||"banner-primary"===e||"banner-secondary"===e?`userflowjs-bubble-button--${e.toLowerCase()}`:e)}var ue=new URL("bubble-frame.css",import.meta.url).href;export{T as B,F as R,k as S,ae as a,ue as b,j as c,R as d,_ as e,te as g,N as h,le as i,ie as m,q as n,O as r,M as s,x as u};
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]="3b7122fe-90c5-4493-ad67-4ce3a1c784c3",e._sentryDebugIdIdentifier="sentry-dbid-3b7122fe-90c5-4493-ad67-4ce3a1c784c3")}catch(n){}}();import{r as e}from"./vendor.react.js";import{c as t,b as n,i as r,d as l}from"./flow-condition-types.js";import{b as a,D as o}from"./stylesheets.js";import{o as i}from"./vendor.obj-str.js";import{c as s,s as u,r as c,m as d,v as m,S as b,E as p,w as f,U as h,x as w,d as g}from"./userflow.js";import{f as v}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{u as E}from"./vendor.react-i18next.js";import{u as y}from"./client-context.js";const k=e.createContext(null);function _(){const t=e.useContext(k);if(!t)throw new Error("useSession: Session was not set");return t}function x(n){const r=_(),[l,o]=e.useState(!1),i=a(r.data),s=function(t){const n=e.useRef(t),r=e.useRef(t);return t!==r.current&&JSON.stringify(t)!==JSON.stringify(r.current)&&(n.current=t),r.current=t,n.current}(n);return e.useLayoutEffect((()=>{if(s){return t[s.type].track({sessionData:i,condition:s,callback:e=>{o(e)}})}}),[i,s]),null!=s&&l}const j=({appearance:t,hidden:n,disabled:r,onMouseDown:l,onClick:a,text:o,active:s,children:u})=>e.createElement("button",{className:i({[se(t)]:!0,"userflowjs-bubble-button--hidden":!!n,"userflowjs-bubble-button--active":!!s}),onMouseDown:l,onClick:a,disabled:r},u||e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},o));function q(e){const t=c();t!==new URL(e,t).toString()&&(s.customNavigate?s.customNavigate(e):window.setTimeout((()=>{u(e)}),0))}async function S(e,t,l){const{steps:a}=t.version;switch(l.type){case d.CLOSE_FLOW:switch(t.kind){case"launcher":await e.dismissLauncher(t,{endReason:p.ACTION});break;case"banner":case"flow":case"checklist":await e.endFlow(t,{endReason:p.ACTION})}return;case d.EVAL_JS:if(s.evalJsDisabled)return void console.error('Userflow.js: Blocked "Evaluate JavaScript" action from running, since userflow.disableEvalJs() has been called.');try{const e=r(l.code||"",t.data);new Function('"use strict";\n'+e)()}catch(o){console.error(`Userflow.js: Evaluate JavaScript action failed.\n\nError:\n${o.stack||o.message||o}\n\nCode:\n${l.code}`)}return;case d.GO_TO_STEP:{if("flow"!==t.kind)return;const n=a.find((({crossVersionId:e})=>e===l.stepCvid));if(!n)throw new h("Action points to unknown step: "+l.stepCvid);return void(await e.goToStep(t,n))}case d.NAVIGATE:{if(!l.url)return void console.warn("Userflow.js: NAVIGATE action is missing url property");const e=M(l.url,{lookupAttribute:n(t.data)});return void(l.navigateTarget===m.NEW_TAB?window.open(e):q(e))}case d.SET_ATTRIBUTE:{let t;const n=l.attributeValue||"";switch(l.attributeOperation){case f.SET:t={set:n};break;case f.SET_DATETIME:t={set:(new Date).toISOString()};break;case f.SET_DATETIME_ONCE:t={set_once:(new Date).toISOString()};break;case f.SET_ONCE:t={set_once:n};break;case f.ADD:t={add:n};break;case f.SUBTRACT:t={subtract:n};break;case f.APPEND:t={append:n};break;case f.PREPEND:t={prepend:n};break;case f.REMOVE:t={remove:n};break;case f.UNSET:t={set:null};break;default:return}const r=l.attributeFqn||"",a=r.split("/");return void(1===a.length?e.updateUser({[r]:t}):"group"===a[0]?e.updateGroup({[a[1]]:t}):"group_membership"===a[0]&&e.updateGroup({},{membership:{[a[1]]:t}}))}case d.SNOOZE:return void("flow"===t.kind&&l.timeValue&&l.timeUnit&&(e.endFlow(t,{endReason:p.SNOOZED,batch:!0}),t.draftMode?window.alert(`In preview mode, flows can't be snoozed.\n\nBut if this flow was running in published mode, the flow would now be snoozed for ${l.timeValue} ${l.timeUnit.toLowerCase()+(1===l.timeValue?"":"s")}.`):e.send({kind:"Snooze",flowId:t.flow.id,timeValue:l.timeValue,timeUnit:l.timeUnit},{batch:!0})));case d.START_FLOW:return"launcher"===t.kind&&e.deactivateLauncher(t),void(l.otherFlow?await e.startFlow({flowId:l.otherFlow.id,stepCvid:l.otherFlowStepCvid,startReason:t.draftMode?b.DRAFT:b.ACTION,replaceCurrent:!0}):console.warn("Userflow.js: START_FLOW action is missing other flow"))}}async function N(e,t,n){const r=[],l=[],a=[];for(const o of n)o.type===d.NAVIGATE?o.navigateTarget===m.NEW_TAB?r.push(o):a.push(o):l.push(o);for(const o of r)S(e,t,o);await Promise.all(l.map((n=>S(e,t,n))));for(const o of a)S(e,t,o)}const T=({button:t})=>{const n=y(),l=_(),a=x(t.disabledCondition),o=x(t.hiddenCondition);return e.createElement(j,{appearance:t.appearance,hidden:o,disabled:a,onClick:()=>N(n,l,t.actions),text:r(t.text,l.data)})},C=()=>e.createElement("svg",{viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg"},e.createElement("polygon",{className:"userflowjs-star-shape",fill:"#fff",points:"16 22.7785728 7.18322122 29.1352549 10.5042507 18.7856772 1.73415226 12.3647451 12.6034401 12.3250364 16 2 19.3965599 12.3250364 30.2658477 12.3647451 21.4957493 18.7856772 24.8167788 29.1352549"})),I=({type:t,required:n,placeholder:r,buttonText:l,options:a,otherOption:s,multipleSelection:u,shuffleOptions:c,labelLeft:d,labelCenter:m,labelRight:b,minValue:p,maxValue:f,onSubmit:h,inert:g})=>{const{t:y}=E(),k=e.useRef(null),[_,x]=e.useState(""),[j,q]=e.useState(new Set),[S,N]=e.useState(),[T,I]=e.useState(),[P,L]=e.useState(!1),[$,R]=e.useState(!1),[M,O]=e.useState(null),F=e.useMemo((()=>a&&(c?[...a].sort((()=>Math.random()-.5)):a)),[a,c]),D=e=>{if(!g&&h){if(n&&""===_&&[w.MULTILINE_TEXT,w.TEXT].includes(t))return O(y("question.requiredError")),void U();R(!0),O(null),h({...e,onCancel:()=>{R(!1)},onError:e=>{R(!1),O(e||"Sorry, something went wrong saving your answer. Please try again.")}})}},U=e.useCallback((()=>{!g&&k.current&&k.current.focus()}),[g]),[B,W]=e.useState(!1);e.useEffect((()=>{B&&(U(),W(!1))}),[U,B]);const V=e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--primary",onClick:()=>D({answer:{kind:"text",value:_}}),tabIndex:g?-1:void 0,disabled:$},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},l||y("question.submit"))));let J=null,K=0;if(t===w.NPS)d=d||y("question.npsLabelLeft"),b=b||y("question.npsLabelRight"),J=[0,1,2,3,4,5,6,7,8,9,10],K=J.length;else if([w.SCALE,w.STARS].includes(t)){f=null!=f?f:5,J=[];for(let e=p=null!=p?p:1;e<=f;e++)J.push(e);K=J.length}else t===w.MULTIPLE_CHOICE&&(K=(F?F.length:0)+(s&&!P?1:0));const[z,G]=e.useState(-1),H=-1===z?-1:Math.min(z,K-1),X=e=>{if(!e.target.closest('[role="radio"], [role="checkbox"], [role="radiogroup"], [role="group"]'))return;let t=null;if("ArrowRight"===e.key||"ArrowDown"===e.key?t=1:"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||(t=-1),null!=t){e.preventDefault();const n=e.currentTarget.querySelectorAll('[role="radio"], [role="checkbox"]');let r=H+t;r<0?r=n.length-1:r>n.length-1&&(r=0),G(r),n[r].focus()}};let Q,Z=null,Y=null;if(J&&(d||m||b)){const t=[];d&&t.push(J[0],d),b&&t.push(J[J.length-1],b),Z=e.createElement("div",{id:"a11y-scale-labels",className:"userflowjs-a11y-only"},t.join(", ")),Y=e.createElement("div",{id:"userflowjs-bubble-question-labels",className:"userflowjs-bubble-question__scale-labels","aria-hidden":"true"},e.createElement("div",{className:"userflowjs-bubble-question__scale-label"},d),m&&e.createElement("div",{className:"userflowjs-bubble-question__scale-label userflowjs-bubble-question__scale-label--center"},m),e.createElement("div",{className:"userflowjs-bubble-question__scale-label userflowjs-bubble-question__scale-label--right"},b))}switch(t){case w.MULTILINE_TEXT:Q=e.createElement(e.Fragment,null,e.createElement("textarea",{ref:k,className:"userflowjs-textarea userflowjs-bubble-question__textarea",value:_,onChange:e=>x(e.target.value),onKeyDown:e=>{(e.ctrlKey||e.metaKey)&&"Enter"===e.key&&D({answer:{kind:"text",value:_}})},placeholder:r||y("question.placeholder"),readOnly:g||$,tabIndex:g?-1:void 0,rows:3,"aria-required":n?"true":void 0,"aria-invalid":null!=M?"true":void 0}),V);break;case w.MULTIPLE_CHOICE:{const t=()=>{_&&D({answer:{kind:"text",value:_},animationPromise:A()})},n=(F?.length||0)+(s?1:0),a=Math.max(0,Math.min(n,null==p?1:p)),c=Math.max(0,Math.min(n,null==f?n:f)),d=()=>{const e=(F||[]).filter(((e,t)=>j.has(t))).map((e=>e.value));s&&P&&""!==_&&e.push(_),a!==c||e.length===a?e.length<a?O(y("question.multiple_selection_too_few",{count:a})):e.length>c?O(y("question.multiple_selection_too_many",{count:c})):D({answer:{kind:"list",values:e}}):O(y("question.multiple_selection_wrong",{count:a}))};Q=e.createElement(e.Fragment,null,u&&e.createElement("div",{className:i({"userflowjs-bubble-question__multiple-choice-hint":!0,"userflowjs-bubble-question__multiple-choice-hint--error":!!M})},y("question.multiple_selection_hint",{replace:{selected:j.size+(s&&P&&""!==_?1:0),range:a===c?a:`${a}-${c}`}}),M&&e.createElement(e.Fragment,null,". ",e.createElement("span",{role:"alert"},M))),e.createElement("div",{className:i({"userflowjs-bubble-question__multiple-choice":!0,"userflowjs-bubble-question__multiple-choice--single-selection":!u,"userflowjs-bubble-question__multiple-choice--multiple-selection":!!u}),role:u?"group":"radiogroup",tabIndex:g||-1!==H?-1:0,onKeyDown:X},F?.map((({value:t,label:n},r)=>e.createElement("button",{key:r,className:i({"userflowjs-bubble-question__multiple-choice-option":!0,"userflowjs-bubble-question__multiple-choice-option--selected":u?j.has(r):$&&!P&&_==t}),onClick:$?void 0:()=>{if(u){O(null);const e=new Set(j);j.has(r)?e.delete(r):e.add(r),q(e)}else L(!1),x(t),D({answer:{kind:"text",value:t},animationPromise:A()})},disabled:$,tabIndex:g||r!==H?-1:0,role:u?"checkbox":"radio","aria-label":n||t,"aria-checked":!P&&_==t},u?e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox-inner"},e.createElement(o,{icon:v}))):e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio-inner"})),e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-option-text","aria-hidden":"true"},n||t)))),s&&(P?e.createElement("div",{className:i({"userflowjs-bubble-question__multiple-choice-option":!0,"userflowjs-bubble-question__multiple-choice-option--other":!0,"userflowjs-bubble-question__multiple-choice-option--selected":u?""!=_:$})},u?e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox",onClick:()=>{x(""),L(!1)}},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox-inner"},e.createElement(o,{icon:v}))):e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio-inner"})),e.createElement("input",{ref:k,className:"userflowjs-bubble-question__multiple-choice-option-input",value:_,onChange:e=>x(e.target.value),onKeyDown:e=>{e.shiftKey||"Enter"!==e.key?"Escape"===e.key&&(e.stopPropagation(),x(""),L(!1)):u?d():t()},onBlur:()=>{""===_&&L(!1)},placeholder:r||y("question.placeholder"),readOnly:g||$,tabIndex:g?-1:void 0}),!u&&e.createElement("button",{"data-testid":"multiple-choice-other-submit",className:"userflowjs-bubble-question__multiple-choice-option-submit",onClick:()=>t(),disabled:$,"aria-label":y("question.submit")},e.createElement(o,{icon:v}))):e.createElement("button",{className:"userflowjs-bubble-question__multiple-choice-option",onClick:$?void 0:()=>{O(null),L(!0),W(!0)},disabled:$,tabIndex:g||F?.length!==H?-1:0,role:"radio","aria-label":y("question.other"),"aria-checked":"false"},u?e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-checkbox-inner"},e.createElement(o,{icon:v}))):e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio"},e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-radio-inner"})),e.createElement("div",{className:"userflowjs-bubble-question__multiple-choice-option-text","aria-hidden":"true"},y("question.other"))))),u&&e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--primary",onClick:d,tabIndex:g?-1:void 0,disabled:$},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},l||y("question.submit")))));break}case w.NPS:case w.SCALE:Q=e.createElement(e.Fragment,null,Z,e.createElement("div",{className:"userflowjs-bubble-question__scale-options",role:"radiogroup",tabIndex:g||-1!==H?-1:0,onKeyDown:X},J?.map(((t,n)=>e.createElement("button",{className:i({"userflowjs-bubble-question__scale-option":!0,"userflowjs-bubble-question__scale-option--selected":$&&S==t}),key:t,tabIndex:g||n!==H?-1:0,onClick:()=>{N(t),D({answer:{kind:"number",value:t},animationPromise:A()})},disabled:$,role:"radio","aria-checked":S==t},t)))),Y);break;case w.STARS:Q=e.createElement("div",{className:"userflowjs-bubble-question__stars-wrapper"},Z,e.createElement("div",{className:"userflowjs-bubble-question__stars",role:"radiogroup",tabIndex:g||-1!==H?-1:0,onKeyDown:X},J?.map(((t,n)=>e.createElement("button",{className:i({"userflowjs-bubble-question__star":!0,"userflowjs-bubble-question__star--hovered":!$&&null!=T&&T>=t,"userflowjs-bubble-question__star--selected":$&&null!=S&&S>=t,"userflowjs-bubble-question__star--not-selected":$&&null!=S&&S<t}),key:t,tabIndex:g||n!==H?-1:0,onClick:()=>{N(t),D({answer:{kind:"number",value:t},animationPromise:A()})},onMouseOver:()=>I(t),onMouseLeave:()=>I(null),disabled:$,role:"radio","aria-checked":S==t,"aria-label":String(t)},e.createElement("div",{className:"userflowjs-bubble-question__star-icon","aria-hidden":"true"},e.createElement(C,null)),e.createElement("div",{className:"userflowjs-bubble-question__star-value","aria-hidden":"true"},t))))),Y);break;case w.TEXT:Q=e.createElement(e.Fragment,null,e.createElement("input",{ref:k,className:"userflowjs-text-input userflowjs-bubble-question__text-input",value:_,onChange:e=>x(e.target.value),onKeyDown:e=>{e.shiftKey||"Enter"!==e.key||D({answer:{kind:"text",value:_}})},placeholder:r||y("question.placeholder"),readOnly:g||$,tabIndex:g?-1:void 0,"aria-required":n?"true":void 0,"aria-invalid":null!=M?"true":void 0}),V)}return e.createElement("div",{className:"userflowjs-bubble-question",style:{pointerEvents:g?"none":void 0}},M&&!(t===w.MULTIPLE_CHOICE&&u)&&e.createElement("div",{className:"userflowjs-bubble-question__error",role:"alert"},M),Q)};function A(){return new Promise((e=>window.setTimeout(e,250)))}const P=({question:t})=>{const n=y(),r=function(){const e=_();if("flow"!==e.kind)throw new Error("useFlowSession: Wrong session kind");return e}();return e.createElement(I,{type:t.type,required:!!t.required,placeholder:t.placeholder||"",buttonText:t.buttonText||"",options:t.options,otherOption:t.otherOption,multipleSelection:t.multipleSelection,shuffleOptions:t.shuffleOptions,labelLeft:t.labelLeft||"",labelCenter:t.labelCenter||"",labelRight:t.labelRight||"",minValue:t.minValue,maxValue:t.maxValue,onSubmit:async e=>{g("answerQuestion",r.id,t.cvid,e);const{answer:l}=e;try{await Promise.all([await n.send({kind:"AnswerQuestion",sessionId:r.id,questionName:t.name,questionCvid:t.cvid,textAnswer:"text"==l.kind?l.value:null,numberAnswer:"number"==l.kind?String(l.value):null,listAnswer:"list"==l.kind?l.values:null}),e.animationPromise])}catch(o){return console.log("Userflow.js: Error when answering question:",o),void e.onError()}const{bindAttributeFqn:a}=t;if(a&&n.flowSession?.id===r.id){let e;switch(l.kind){case"text":e={name:a,value:l.value};break;case"number":e={name:a,value:String(l.value)};break;case"list":e={name:a,value:l.values}}n.optimisticClockUIUpdate((()=>{n.setFlowSession({...r,data:[...r.data.filter((e=>e.name!==a)),e]})}))}N(n,r,t.actions)}})},L=({text:t})=>{if(!t)return null;const n=t.split(/\n/);return 1===n.length?e.createElement(e.Fragment,null,n[0]):e.createElement(e.Fragment,null,n.map(((t,n)=>e.createElement(e.Fragment,{key:n},n>0&&e.createElement("br",null),t))))};function $(e=""){return{type:"paragraph",children:[{text:e}]}}function R(e){if(e){let n;try{n=JSON.parse(e)}catch(t){throw new Error("Could not JSON.parse rich content doc: "+e)}if("rich2"===n.type)return n;throw new Error("Could not recognize rich content doc: "+e)}return function(e=""){return{type:"rich2",children:[$(e)]}}()}function M(e,{lookupAttribute:t}){if(!e)return"";"string"==typeof e&&(e=function(e){if(e){let n;try{n=JSON.parse(e)}catch(t){throw new Error("Could not JSON.parse plaintext doc: "+e)}if("plaintext2"===n.type)return n;throw new Error("Could not recognize plaintext doc: "+e)}return function(e=""){return{type:"plaintext2",children:[{type:"plaintext",children:[{text:e}]}]}}()}(e));const n=[];function r(e){e&&e.forEach((e=>e&&function(e){if(le(e))e.text&&n.push(e.text);else switch(e.type){case"attribute":{const r=te(e,t);r&&n.push(r);break}default:r(e.children)}}(e)))}return r(e.children),n.join("")}function O(e){let t=!0;if(!e)return!0;"string"==typeof e&&(e=R(e));const n=new Set(["attribute","button","image","question","video"]);return ae(e,(e=>{le(e)?""!==e.text&&(t=!1):"type"in e&&n.has(e.type)&&(t=!1)})),t}const F=e.memo((({doc:t,...n})=>t?("string"==typeof t&&(t=R(t)),e.createElement(D,{parent:t,...n})):null)),D=({parent:t,...n})=>e.createElement(e.Fragment,null,t.children.map(((r,l)=>le(r)?e.createElement(U,{key:l,node:r}):e.createElement(W,{key:l,node:r,parent:t,...n})))),U=({node:t})=>t.text?e.createElement(B,{node:t},e.createElement(L,{text:t.text})):null,B=({node:t,children:n})=>(t.color&&"string"==typeof t.color&&(n=e.createElement("span",{style:{color:t.color}},n)),t.bold&&(n=e.createElement("b",null,n)),t.italic&&(n=e.createElement("i",null,n)),t.underline&&(n=e.createElement("u",null,n)),t.strikeThrough&&(n=e.createElement("s",null,n)),t.code&&(n=e.createElement("code",null,n)),t.small&&(n=e.createElement("small",null,n)),t.sup&&(n=e.createElement("sup",null,n)),n),W=({node:t,parent:n,...r})=>{const{lookupAttribute:l}=r,a=e.createElement(D,{parent:t,...r});switch(t.type){case"attribute":return e.createElement(V,{node:t,...r});case"button":return e.createElement(J,{node:t,...r});case"button-group":return e.createElement("div",{className:"userflowjs-bubble-buttons",style:{justifyContent:t.align}},a);case"column":return e.createElement("div",{style:Y(t,n)},a);case"column-group":return e.createElement("div",{className:"p-like",style:Z(t)},a);case"container":return e.createElement("div",{className:"p-like"+(t.className?` ${t.className}`:""),style:ee(t)},a);case"image":return e.createElement(z,{node:t,...r});case"link":return e.createElement("a",{href:M(t.href,{lookupAttribute:l}),target:"same"===t.target?"_top":"_blank",rel:"noopener noreferrer"},a);case"paragraph":return e.createElement("p",{className:X(t)},a);case"heading1":return e.createElement("h1",{className:X(t)},a);case"heading2":return e.createElement("h2",{className:X(t)},a);case"question":return e.createElement(K,{node:t,...r});case"quote":return e.createElement("blockquote",null,a);case"code-block":return e.createElement("pre",null,e.createElement("code",null,a));case"ordered-list":return e.createElement("ol",null,a);case"unordered-list":return e.createElement("ul",null,a);case"list-item":return e.createElement("li",null,a);case"video":return e.createElement(G,{node:t,...r});default:return e.createElement("div",null,a)}},V=({node:t,lookupAttribute:n})=>{let r=te(t,n);return e.createElement(B,{node:t},r)},J=({node:t,buttons:n})=>{const r=n?.find((e=>e.cvid===t.cvid));return r?e.createElement(T,{key:r.id,button:r}):null},K=({node:t,questions:n})=>{const r=n?.find((e=>e.cvid===t.cvid));return r?e.createElement(P,{key:r.id,question:r}):null},z=({node:t,lookupAttribute:n})=>{const{src:r,widthMode:a,displayWidth:o,width:i,height:s,marginTop:u,marginRight:c,marginBottom:d,marginLeft:m,align:b,hasLink:p,href:f}=t;if("string"!=typeof r||!r)return null;const{wrapperStyle:h,blockStyle:w}=Q({widthMode:a,displayWidth:o,width:i,height:s,marginTop:u,marginRight:c,marginBottom:d,marginLeft:m,align:b});let g=e.createElement("img",{src:l(r,(e=>encodeURIComponent((n?n(e):"")||""))),style:{...w,objectFit:"contain"},alt:""});return p&&f&&(g=e.createElement("a",{href:M(f,{lookupAttribute:n}),target:"same"===t.target?"_top":"_blank",rel:"noopener noreferrer",style:w},g)),e.createElement("div",{className:"p-like"},e.createElement("div",{style:h},g))},G=({node:t,lookupAttribute:n})=>{const{url:r,widthMode:l,displayWidth:a,width:o,height:i,marginTop:s,marginRight:u,marginBottom:c,marginLeft:d,align:m}=t;if("string"!=typeof r||!r)return null;const{wrapperStyle:b,blockStyle:p}=Q({widthMode:l,displayWidth:a,width:o,height:i,marginTop:s,marginRight:u,marginBottom:c,marginLeft:d,align:m});return e.createElement("div",{className:"p-like"},e.createElement("div",{style:b},e.createElement("div",{style:p},e.createElement(H,{element:t,noFocus:!0,lookupAttribute:n}))))},H=({element:{embedType:t,url:n,src:r,autoPlay:a,controls:o,loop:i,muted:s},noFocus:u,forceMuted:c,lookupAttribute:d})=>{if(!n)return null;const m={width:"100%",height:"100%",allow:"accelerometer; autoplay; fullscreen; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,allowtransparency:"true",mozallowfullscreen:"true",webkitallowfullscreen:"true",oallowfullscreen:"true",msallowfullscreen:"true",style:{display:"block",border:"none"},tabIndex:u?-1:void 0};if("video"===t)return e.createElement("video",{key:n+";"+String(a)+";"+String(o)+";"+String(i)+";"+String(s),src:n,style:{width:"100%",height:"100%",display:"block"},autoPlay:!!a,controls:!1!==o,loop:i,muted:c||s});if(r){let t;try{t=new URL(r)}catch(w){return null}return c&&(t.searchParams.has("autoplay")||t.searchParams.has("autoPlay"))&&(t.searchParams.set("mute","1"),t.searchParams.set("muted","1"),t.searchParams.set("volume","0")),e.createElement("iframe",{src:t.toString(),...m})}let b=function(e,{iframeFallback:t}={}){let n;try{n=new URL(e)}catch(w){return{kind:"invalid"}}const{hostname:r,pathname:l,searchParams:a}=n;if(r.match(/^(www\.)?(use)?loom\.com$/)){const e=l.match(/^\/share\/([a-z0-9]+)$/i);if(e){const[,t]=e;return{kind:"ok",videoProvider:"loom",videoId:t,searchParams:a}}}if(e.startsWith("raw:")){return{kind:"ok",videoProvider:"raw",videoId:e.replace(/^raw:/,""),searchParams:a}}if(e.startsWith("iframe:")){return{kind:"ok",videoProvider:"iframe",videoId:e.replace(/^iframe:/,""),searchParams:a}}if(["youtube.com","www.youtube.com"].includes(r)){const e=a.get("v");if(e)return a.delete("v"),{kind:"ok",videoProvider:"youtube",videoId:e,searchParams:a}}if("youtu.be"===r){const e=l.match(/^\/([^/]+)$/);if(e){const[,t]=e;return{kind:"ok",videoProvider:"youtube",videoId:t,searchParams:a}}}if("vimeo.com"===r){const e=l.match(/^\/(\d+)$/);if(e){const[,t]=e;return{kind:"ok",videoProvider:"vimeo",videoId:t,searchParams:a}}}if("player.vimeo.com"===r){const e=l.match(/^\/video\/([^/]+)$/);if(e){const[,t]=e;return{kind:"ok",videoProvider:"vimeo",videoId:t,searchParams:a}}}if(r.match(/^[^.]+\.wistia.com$/)){const e=l.match(/^\/medias\/([^/]+)$/);if(e){const[,t]=e;return{kind:"ok",videoProvider:"wistia",videoId:t,searchParams:a}}}return t?{kind:"ok",videoProvider:"iframe",videoId:e,searchParams:a}:{kind:"invalid"}}(n,{iframeFallback:!0});if("invalid"===b.kind)return null;const{videoProvider:p,videoId:f,searchParams:h}=b;switch(a=a||h.has("autoplay")||h.has("autoPlay"),p){case"iframe":return e.createElement("iframe",{src:l(f,(e=>encodeURIComponent((d?d(e):"")||""))),scrolling:h.get("scrolling")||void 0,...m});case"loom":return e.createElement("iframe",{src:`https://www.loom.com/embed/${f}?${h.toString()}`,...m});case"raw":return e.createElement("video",{src:f,controls:!0,style:{width:"100%",height:"100%",display:"block"},autoPlay:h.has("autoplay"),muted:c||h.has("muted")});case"youtube":return c&&a&&h.set("mute","1"),e.createElement("iframe",{src:`https://www.youtube.com/embed/${f}?${h.toString()}`,...m});case"vimeo":return c&&a&&h.set("muted","1"),e.createElement("iframe",{src:`https://player.vimeo.com/video/${f}?${h.toString()}`,...m});case"wistia":return h.set("videoFoam","true"),c&&a&&h.set("volume","0"),e.createElement(e.Fragment,null,e.createElement("iframe",{src:`https://fast.wistia.net/embed/iframe/${f}?${h.toString()}`,...m}))}};function X(e){return"right"===e.align?"userflowjs-text-align-end":"center"===e.align?"userflowjs-text-align-center":"justify"===e.align?"userflowjs-text-align-justify":""}function Q({widthMode:e,displayWidth:t,width:n,height:r,marginTop:l,marginRight:a,marginBottom:o,marginLeft:i,align:s}){const u={position:"relative"};"number"!=typeof t&&(t=100,e="percent"),"center"===s?(u.marginLeft="auto",u.marginRight="auto"):"right"===s&&(u.marginLeft="auto");let c=0;if(null!=l&&"number"==typeof l&&(u.marginTop=`${l}px`),null!=a&&"number"==typeof a&&(u.marginRight=`${a}px`,c+=a),null!=o&&"number"==typeof o&&(u.marginBottom=`${o}px`),null!=i&&"number"==typeof i&&(u.marginLeft=`${i}px`,c+=i),"number"!=typeof t||"number"!=typeof n||"number"!=typeof r)u.width="100px",u.height="100px";else if("px"===e){const e=10,l=Math.max(e,t);u.width=`${l}px`,u.height=l/(n/r)+"px"}else{const e=Math.max(0,Math.min(100,t));u.width=`calc(${e}% - ${c}px)`,u.height="0",u.paddingBottom=`calc((${e}% - ${c}px) / (${n} / ${r})`}return{wrapperStyle:u,blockStyle:{position:"absolute",top:"0",left:"0",display:"block",width:"100%",height:"100%"}}}function Z(e){return{display:"flex",alignItems:"stretch",marginRight:`-${null==e.spacing?16:e.spacing}px`}}function Y(e,t){const n="fill"===e.widthMode||null==e.displayWidth;return{display:"flex",flexDirection:"column",justifyContent:e.justifyContent,width:n?void 0:"px"===e.widthMode?`${e.displayWidth||50}px`:"percent"===e.widthMode?`${e.displayWidth||50}%`:void 0,flex:n?"1 0 0":void 0,marginRight:`${null==t.spacing?16:t.spacing}px`,marginBottom:"0"}}function ee(e){return{display:"flex",flexDirection:"column",justifyContent:e.justifyContent,width:"px"===e.widthMode&&null!=e.displayWidth?`${e.displayWidth}px`:"percent"===e.widthMode&&null!=e.displayWidth?`${e.displayWidth}%`:void 0,minHeight:"px"===e.heightMode?`${e.displayHeight||50}px`:void 0,flex:"fill"===e.heightMode?"1 0 0":void 0,marginTop:null!=e.marginTop?`${e.marginTop}px`:void 0,marginRight:null!=e.marginRight?`${e.marginRight}px`:"fill"!==e.widthMode&&"center"===e.align?"auto":void 0,marginBottom:null!=e.marginBottom?`${e.marginBottom}px`:void 0,marginLeft:null!=e.marginLeft?`${e.marginLeft}px`:"fill"===e.widthMode||"center"!==e.align&&"right"!==e.align?void 0:"auto"}}function te(e,t){if(!t)return null;const n=e.attributeName;if("string"==typeof n){const r=t(n)||e.fallback;if("string"==typeof r)return r}return null}function ne(e){return Array.isArray(e.children)&&void 0===e.addMark}function re(e,t,n="type"){return ne(e)&&e[n]===t}function le(e){return"string"==typeof e.text}function ae(e,t){function n(e){e&&e.forEach(((e,r)=>e&&function(e,r){t(e,r),ne(e)&&n(e.children)}(e,r)))}n(Array.isArray(e)?e:e.children)}const oe=e.memo((({doc:t,lookupAttribute:n})=>t?e.createElement(e.Fragment,null,M(t,{lookupAttribute:n})):null));function ie(e,{buttons:t,questions:n}){const r=new Set,l=new Set;if(ae(e,(e=>{re(e,"button")&&r.add(e.cvid),re(e,"question")&&l.add(e.cvid)})),n){const t=n.filter((e=>!l.has(e.cvid)));t.length>0&&(e={...e,children:[...e.children,...t.map((e=>({type:"question",cvid:e.cvid,children:[{text:""}]})))]})}if(t){const n=t.filter((e=>!r.has(e.cvid)));n.length>0&&(e={...e,children:[...e.children,{type:"button-group",children:n.map((e=>({type:"button",cvid:e.cvid,children:[{text:""}]})))}]})}return e}function se(e){return"userflowjs-bubble-button "+("primary"===(e=e||"default")||"PRIMARY"===e||"default"===e||"DEFAULT"===e||"banner-primary"===e||"banner-secondary"===e?`userflowjs-bubble-button--${e.toLowerCase()}`:e)}var ue=new URL("bubble-frame.css",import.meta.url).href;export{T as B,F as R,k as S,oe as a,ue as b,j as c,R as d,_ as e,te as g,N as h,le as i,ie as m,q as n,O as r,M as s,x as u};
2
2
  //# sourceMappingURL=bubble-frame.styl.js.map