@flows/js
Version:
Flows JS SDK - Build native product growth experiences, your way
543 lines (506 loc) • 19.2 kB
JavaScript
import{A as X,B as W,G as f,d as i,e as g,f as u,g as b,j as H,k as E,m as Z,n as A,o as F,p as v,r as K,s as j,t as h,v as l,w as x,y as J}from"./chunk-FNUMDMUH.mjs";import{html as c,LitElement as Le}from"lit";import{property as Se,state as C}from"lit/decorators.js";var Y=`:root {
--flows-debug-bg-default: #ffffff;
--flows-debug-bg-subtle: #f9fafc;
--flows-debug-bg-hover: #ebeef3;
--flows-debug-fg-default: #15181c;
--flows-debug-fg-subtle: #6b727b;
--flows-debug-border: 1px solid #d9dde2;
--flows-debug-fg-success: #188635;
--flows-debug-fg-error: #cf2320;
--flows-debug-overlay: hsla(0, 0%, 100%, 0.2);
--flows-debug-overlay-hover: hsla(0, 0%, 100%, 0.3);
--flows-debug-small-shadow: 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 4px 4px -1px rgba(0, 0, 0, 0.02);
--flows-debug-shadow:
0px 3px 8px rgba(0, 0, 0, 0.07), 0px 2px 5px rgba(0, 0, 0, 0.07),
0px 1px 1px rgba(0, 0, 0, 0.07);
--flows-debug-system-font:
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Open Sans", "Helvetica Neue", sans-serif;
--flows-debug-mono-font:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
}
.dark {
--flows-debug-bg-default: #15181c;
--flows-debug-bg-subtle: #22262d;
--flows-debug-bg-hover: #2b313a;
--flows-debug-fg-default: #f9fafc;
--flows-debug-fg-subtle: #8b929b;
--flows-debug-border: 1px solid #353c46;
--flows-debug-fg-success: #33a449;
--flows-debug-fg-error: #ea6369;
--flows-debug-overlay: hsla(0, 0%, 100%, 0.1);
--flows-debug-overlay-hover: hsla(0, 0%, 100%, 0.2);
--flows-debug-small-shadow:
0px 4px 4px -1px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
--flows-debug-shadow:
0px 3px 8px rgba(0, 0, 0, 0.188), 0px 2px 5px rgba(0, 0, 0, 0.188),
0px 1px 1px rgba(0, 0, 0, 0.188);
}
flows-debug-fadeIn {
from {
opacity: 0;
scale: 0.5;
}
80% {
opacity: 1;
scale: 1.2;
}
to {
scale: 1;
}
}
.flows-debug {
position: fixed;
z-index: 10000;
color: var(--flows-debug-fg-default);
}
:where(.flows-debug) hr {
border-top: var(--flows-debug-border);
}
:where(.flows-debug) a {
color: inherit;
text-decoration: none;
}
:where(.flows-debug) p {
margin: 0;
}
.flows-debug-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 0;
color: var(--flows-debug-fg-default);
}
.flows-debug-top-left {
top: 16px;
left: 16px;
}
.flows-debug-bottom-right {
bottom: 16px;
right: 16px;
}
.flows-debug-bottom-left {
bottom: 16px;
left: 16px;
}
.flows-debug-top-right {
top: 16px;
right: 16px;
}
.flows-debug-menu {
background: var(--flows-debug-bg-default);
display: flex;
align-items: center;
justify-content: center;
height: 36px;
width: 36px;
border-radius: 99px;
margin: 0;
cursor: pointer;
border: var(--flows-debug-border);
box-shadow: var(--flows-debug-small-shadow);
animation: flows-debug-fadeIn 120ms ease-out;
}
.flows-debug-menu-inset {
color: var(--flows-debug-fg-default);
transition: background 120ms ease-in-out;
padding: 7px;
border-radius: 99px;
display: flex;
}
.flows-debug-menu:hover .flows-debug-menu-inset {
background: var(--flows-debug-bg-hover);
}
.flows-debug-menu-error {
background: var(--flows-debug-fg-error) !important;
}
.flows-debug-menu-inset-error {
background: var(--flows-debug-overlay) !important;
color: var(--flows-debug-bg-default) !important;
&:hover {
background: var(--flows-debug-overlay-hover) !important;
}
}
.flows-debug-popover {
position: absolute;
margin-top: 8px;
margin-bottom: 8px;
background: var(--flows-debug-bg-default);
border: var(--flows-debug-border);
border-radius: 8px;
box-shadow: var(--flows-debug-shadow);
font-size: 13px;
font-family: var(--flows-debug-system-font);
}
.flows-debug-popover-wide {
width: 360px;
}
.flows-debug-popover-narrow {
width: 260px;
}
.flows-debug-top-right .flows-debug-popover {
right: 0;
top: 100%;
}
.flows-debug-bottom-right .flows-debug-popover {
right: 0;
bottom: 100%;
}
.flows-debug-top-left .flows-debug-popover {
left: 0;
top: 100%;
}
.flows-debug-bottom-left .flows-debug-popover {
left: 0;
bottom: 100%;
}
.flows-debug-section-header {
display: flex;
gap: 4px;
align-items: center;
border-bottom: var(--flows-debug-border);
padding: 12px 16px 12px 8px;
}
.flows-debug-section-label {
font-weight: 600;
}
.flows-debug-section-content {
padding: 16px;
}
.flows-debug-code-block {
padding: 8px;
border-radius: 4px;
background: var(--flows-debug-bg-subtle);
font-size: 12px;
font-family: var(--flows-debug-mono-font);
overflow-x: auto;
max-height: 480px;
border: var(--flows-debug-border);
scrollbar-width: thin;
scrollbar-color: var(--flows-debug-fg-subtle) transparent;
}
.flows-debug-inline-code {
font-family: var(--flows-debug-mono-font);
font-size: 12px;
}
.flows-debug-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 6px;
border-radius: 6px;
transition: background 120ms ease-in-out;
}
.flows-debug-item-interactive {
cursor: pointer;
&:hover {
background: var(--flows-debug-bg-hover);
}
}
.flows-debug-item-info {
font-size: 12px;
color: var(--flows-debug-fg-subtle);
margin-top: 2px;
}
.flows-debug-item-label {
font-weight: 600;
}
.flows-debug-item-secondary {
color: var(--flows-debug-fg-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flows-debug-item-list {
display: flex;
flex-direction: column;
padding: 6px;
}
.flows-debug-info-line {
margin-bottom: 4px;
}
.flows-debug-button-secondary {
font-weight: 600;
padding: 4px 8px;
border-radius: 6px;
color: var(--flows-debug-fg-default);
background-color: var(--flows-debug-bg-subtle);
border: var(--flows-debug-border);
cursor: pointer;
transition: all 80ms ease-in-out;
flex-shrink: 0;
&:hover {
background-color: var(--flows-debug-bg-hover);
}
&:active {
background-color: var(--flows-debug-bg-default);
}
}
.flows-debug-section-close {
padding: 4px;
border-radius: 6px;
width: 24px;
height: 24px;
&:hover {
background-color: var(--flows-debug-bg-hover);
}
}
.flows-debug-select-wrap {
position: relative;
svg {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
}
.flows-debug-select {
all: unset;
border-radius: 6px;
color: var(--flows-debug-fg-default);
background-color: var(--flows-debug-bg-subtle);
border: var(--flows-debug-border);
padding: 4px 8px;
padding-right: 28px;
cursor: pointer;
transition: all 80ms ease-in-out;
&:focus {
outline: none;
}
&:hover {
background-color: var(--flows-debug-bg-hover);
}
}
.flows-debug-shortcut-list {
display: flex;
gap: 4px;
}
.flows-debug-shortcut {
display: flex;
align-items: center;
font-size: 12px;
color: var(--flows-debug-fg-default);
background-color: var(--flows-debug-bg-subtle);
min-width: 20px;
height: 20px;
padding: 0 4px;
border-radius: 4px;
justify-content: center;
border: var(--flows-debug-border);
}
.flows-debug-validation-item {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.flows-debug-validation-valid {
color: var(--flows-debug-fg-success);
flex-shrink: 0;
}
.flows-debug-validation-invalid {
color: var(--flows-debug-fg-error);
flex-shrink: 0;
}
.flows-debug-print-button {
margin-top: 8px;
}
`;import{clsx as P}from"clsx";import{SignalWatcher as Ie}from"@lit-labs/preact-signals";import{html as he}from"lit";var q=()=>he`<svg
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 40 40"
>
<path
d="M38.02 12.24C36.7 10 34.87 8.22 32.56 6.94C30.38 5.74 27.83 5.08 25 5H16C12.97 5 9.76 5.66 7.45 6.94C5.14 8.22 3.3 10 1.99 12.23C0.67 14.46 0 17.08 0 20.02C0 22.96 0.67 25.53 1.99 27.76C3.3 29.99 5.15 31.78 7.47 33.05C9.8 34.33 12.94 35 16 35H25C27.81 34.94 30.4 34.26 32.6 33.05C34.91 31.77 36.74 29.99 38.04 27.76C39.34 25.52 40 22.92 40 20.01C40 17.1 39.33 14.48 38.02 12.24ZM30.3 19.89L27.37 22.82C26.63 23.56 25.62 24 24.58 24H19.95C18.9 24 17.9 24.39 17.16 25.13L16.12 26C13.19 28.46 8.72 26.37 8.72 22.55C8.72 21.65 9.08 20.79 9.71 20.16L12.64 17.23C13.38 16.49 14.4 16 15.45 16H20.08C21.13 16 22.12 15.66 22.86 14.92L23.79 14.09C26.65 11.53 31.2 13.5 31.29 17.34V17.5C31.29 18.4 30.94 19.26 30.3 19.89Z"
/>
</svg>`;import{html as ye}from"lit";import{html as xe}from"lit";var G=()=>xe`<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
fill="currentColor"
/>
</svg>`;var Q=({children:e,label:t,onClose:o})=>ye`<div class="flows-debug-popover-wide">
<div class="flows-debug-section-header">
<button class="flows-debug-btn flows-debug-section-close" =${o} type="button">
${G()}
</button>
<p class="flows-debug-section-label">${t}</p>
</div>
<div class="flows-debug-section-content">${e}</div>
</div>`;import{html as oe}from"lit";import{html as ke}from"lit";var ee=()=>ke`<svg fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
/>
</svg>`;var te=({position:e,onPositionChange:t})=>oe`
<div class="flows-debug-item">
<div>
<label class="flows-debug-item-label" htmlFor="debug-panel-position"> Position </label>
<p class="flows-debug-item-info">Sets the position of the debug panel on the screen.</p>
</div>
<div class="flows-debug-select-wrap">
<select
class="flows-debug-select"
id="debug-panel-position"
=${s=>{let r=s.target.value;t(r)}}
>
${A.map(s=>oe`<option ?selected=${s.value===e} value=${s.value}>
${s.label}
</option>`)}
</select>
${ee()}
</div>
</div>
<div class="flows-debug-item">
<div>
<p class="flows-debug-item-label">Debug panel shortcut</p>
<p class="flows-debug-item-info">
Used to toggle the panel visibility even when debug mode is not active.
</p>
</div>
<div class="flows-debug-shortcut-list">
<p class="flows-debug-shortcut">${h()?"Cmd":"Ctrl"}</p>
<p class="flows-debug-shortcut">${h()?"Option":"Alt"}</p>
<p class="flows-debug-shortcut">Shift</p>
<p class="flows-debug-shortcut">F</p>
</div>
</div>
<div class="flows-debug-item">
<div>
<p class="flows-debug-item-label">Docs</p>
<p class="flows-debug-item-info">Learn more about the debug panel and its features.</p>
</div>
<a
class="flows-debug-button-secondary"
href=${j}
target="_blank"
rel="noopener noreferrer"
>
Open docs
</a>
</div>
<div class="flows-debug-item">
<div>
<p class="flows-debug-item-label">SDK version</p>
<p class="flows-debug-item-info">
Make sure to keep your SDK up to date for the best experience.
</p>
</div>
<p>${f}</p>
</div>
`;import{html as Ce}from"lit";var se=({userId:e,userProperties:t})=>Ce`
<p class="flows-debug-info-line">
<strong>User ID:</strong> <code class="flows-debug-inline-code">${e}</code>
</p>
<p class="flows-debug-info-line">
<strong>User properties:</strong>
</p>
<pre class="flows-debug-code-block">${JSON.stringify(t!=null?t:{},null,2)}</pre>
`;import{html as y}from"lit";import{html as le}from"lit";var a=({label:e,secondary:t,onClick:o})=>le`<button
class="flows-debug-btn flows-debug-item flows-debug-item-interactive"
=${o}
type="button"
>
<span class="flows-debug-item-label">${e}</span>
${t?le`<span class="flows-debug-item-secondary">${t}</span>`:null}
</button>`;var re=({blocks:e,organizationId:t,sdkSetupValid:o,setPanelPage:s,userId:r,pathname:d})=>y`<div class="flows-debug-popover-narrow">
<div class="flows-debug-item-list">
${a({label:"User",onClick:()=>{s("user")},secondary:r?y`<code class="flows-debug-inline-code">${r}</code>`:"Not set"})}
${a({label:"SDK setup",onClick:()=>{s("sdk-setup")},secondary:o?"Valid":y`<span class="flows-debug-validation-invalid">Error</span>`})}
${a({label:"Blocks",onClick:()=>{s("blocks")},secondary:`${e.length} loaded`})}
${a({label:"Pathname",onClick:()=>{s("pathname")},secondary:d})}
</div>
<hr />
<div class="flows-debug-item-list">
${a({label:"Settings",onClick:()=>{s("settings")},secondary:f})}
<a
href=${K(t)}
target="_blank"
rel="noopener noreferrer"
class="flows-debug-item flows-debug-item-interactive flows-debug-item-label"
>
Open Flows dashboard
</a>
</div>
</div>`;import{html as Pe}from"lit";var ae=({blocks:e})=>Pe`<p class="flows-debug-info-line"><strong>Loaded blocks:</strong> ${e.length}</p>
<p class="flows-debug-info-line">
<strong>Blocks JSON:</strong>
</p>
<pre class="flows-debug-code-block">${JSON.stringify(e,null,2)}</pre>
<button
class="flows-debug-btn flows-debug-button-secondary flows-debug-print-button"
type="button"
=${()=>{console.log(e)}}
>
Print to console
</button>`;import{html as k}from"lit";var ne=({organizationId:e,environment:t,statusItems:o})=>{let s=e||k`<span class="flows-debug-validation-invalid">Not set</span>`,r=t||k`<span class="flows-debug-validation-invalid">Not set</span>`;return k`
<p class="flows-debug-info-line">
<strong>Organization ID:</strong>
<code class="flows-debug-inline-code">${s}</code>
</p>
<p class="flows-debug-info-line">
<strong>Environment:</strong>
<code class="flows-debug-inline-code">${r}</code>
</p>
<p class="flows-debug-info-line">
<strong>Validation:</strong>
</p>
${o}
`};import{html as $e}from"lit";var ie=({className:e})=>$e`<svg
fill="currentColor"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
class=${e}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.03 5.22032C12.1705 5.36094 12.2494 5.55157 12.2494 5.75032C12.2494 5.94907 12.1705 6.13969 12.03 6.28032L7.53003 10.7803C7.38941 10.9208 7.19878 10.9997 7.00003 10.9997C6.80128 10.9997 6.61066 10.9208 6.47003 10.7803L4.22003 8.53032C4.14634 8.46165 4.08724 8.37885 4.04625 8.28685C4.00526 8.19486 3.98322 8.09554 3.98144 7.99484C3.97966 7.89414 3.99819 7.79411 4.03591 7.70072C4.07363 7.60733 4.12977 7.5225 4.20099 7.45128C4.27221 7.38006 4.35705 7.32391 4.45043 7.28619C4.54382 7.24847 4.64385 7.22995 4.74455 7.23172C4.84526 7.2335 4.94457 7.25554 5.03657 7.29654C5.12857 7.33753 5.21137 7.39663 5.28003 7.47032L7.00003 9.19032L10.97 5.22032C11.1107 5.07987 11.3013 5.00098 11.5 5.00098C11.6988 5.00098 11.8894 5.07987 12.03 5.22032Z"
/>
</svg>`;import{html as Re}from"lit";var de=({className:e})=>Re`<svg
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
class=${e}
fill="currentColor"
>
<path
d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
/>
</svg>`;import{html as Te}from"lit";var pe=({pathname:e})=>Te`<p class="flows-debug-info-line">
<strong>Pathname:</strong>
</p>
<p class="flows-debug-code-block flows-debug-info-line">${e}</p>
<p class="flows-debug-info-line">
This pathname is used when evaluating page targeting conditions.
</p>`;var ge,ue,be,n=class extends Ie(Le){constructor(){super(...arguments);this.forceOpen=!1;u(this,ge,!1);u(this,ue,F());u(this,be)}get _open(){return g(this,ge)}set _open(o){b(this,ge,o)}get _position(){return g(this,ue)}set _position(o){b(this,ue,o)}get _page(){return g(this,be)}set _page(o){b(this,be,o)}_toggleOpen(){this._open=!this._open}_handlePositionChange(o){this._position=o,localStorage.setItem(Z,o)}_handlePageChange(o){this._page=o}connectedCallback(){super.connectedCallback(),this._open=this.forceOpen}createRenderRoot(){return this}render(){var R,T,L;let o=(R=l.value)==null?void 0:R.organizationId,s=(T=l.value)==null?void 0:T.userId,r=(L=l.value)==null?void 0:L.environment,d=J.value,fe=x.value,$=[{key:"organizationId",valid:o&&H.test(o)},{key:"userId",valid:!!s},{key:"environment",valid:!!r},{key:"apiError",valid:!X.value&&!W.value}],m=$.every(p=>p.valid),ce=(()=>{var p,S,I,_,D,B,z,M,O,N,U,V;return this._page==="user"?se({userId:(S=(p=l.value)==null?void 0:p.userId)!=null?S:"",userProperties:(I=l.value)==null?void 0:I.userProperties}):this._page==="blocks"?ae({blocks:d}):this._page==="sdk-setup"?ne({environment:(D=(_=l.value)==null?void 0:_.environment)!=null?D:"",organizationId:(z=(B=l.value)==null?void 0:B.organizationId)!=null?z:"",statusItems:c`${$.map(w=>{let me=w.valid?ie({className:"flows-debug-validation-valid"}):de({className:"flows-debug-validation-invalid"}),we=v[w.key][E(w.valid)];return c`<div class="flows-debug-validation-item">
${me}
<p>${we}</p>
</div>`})}`}):this._page==="pathname"?pe({pathname:fe}):this._page==="settings"?te({position:this._position,onPositionChange:this._handlePositionChange.bind(this)}):re({blocks:d,userId:(O=(M=l.value)==null?void 0:M.userId)!=null?O:"",organizationId:(U=(N=l.value)==null?void 0:N.organizationId)!=null?U:"",sdkSetupValid:m,setPanelPage:this._handlePageChange.bind(this),pathname:(V=x.value)!=null?V:""})})();return c`<div class=${P("flows-debug",`flows-debug-${this._position}`)}>
<button
class=${P("flows-debug-btn","flows-debug-menu",!m&&"flows-debug-menu-error")}
type="button"
="${this._toggleOpen.bind(this)}"
>
<div
class=${P("flows-debug-menu-inset",!m&&"flows-debug-menu-inset-error")}
>
${q()}
</div>
</button>
${this._open?c`<div class="flows-debug-popover">
${_e({children:ce,onClose:()=>{this._handlePageChange(void 0)},page:this._page})}
</div>`:null}
<style>
${Y}
</style>
</div> `}};ge=new WeakMap,ue=new WeakMap,be=new WeakMap,i([Se({type:Boolean})],n.prototype,"forceOpen",2),i([C()],n.prototype,"_open",1),i([C()],n.prototype,"_position",1),i([C()],n.prototype,"_page",1);var _e=({children:e,onClose:t,page:o})=>o?Q({children:e,label:v.title[o],onClose:t}):e;export{n as DebugPanel};