@withone/connect 0.7.0 → 0.8.0
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/README.md +16 -30
- package/dist/constants.d.ts +2 -8
- package/dist/index.d.ts +0 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/react.cjs.js +1 -1
- package/dist/react.d.ts +1 -3
- package/dist/react.esm.js +1 -1
- package/dist/svelte.cjs.js +1 -1
- package/dist/svelte.esm.js +1 -1
- package/dist/types/index.d.ts +18 -32
- package/dist/vue.cjs.js +1 -1
- package/dist/vue.esm.js +1 -1
- package/dist/wrapper-options.d.ts +0 -1
- package/package.json +2 -2
- package/src/button.ts +0 -4
- package/src/constants.ts +2 -15
- package/src/index.ts +0 -1
- package/src/react-types.d.ts +0 -1
- package/src/react.ts +1 -5
- package/src/svelte-types.d.ts +0 -1
- package/src/types/index.d.ts +18 -32
- package/src/useOneConnect.ts +58 -141
- package/src/wrapper-options.ts +0 -2
- package/dist/complete.d.ts +0 -12
- package/dist/window/index.d.ts +0 -15
- package/src/complete.ts +0 -36
- package/src/window/index.ts +0 -171
package/README.md
CHANGED
|
@@ -44,7 +44,7 @@ yarn add @withone/connect
|
|
|
44
44
|
|
|
45
45
|
## How it works
|
|
46
46
|
|
|
47
|
-
Everything sensitive — `state`, the PKCE verifier, your client secret, the tokens — lives on **your server**. The SDK is a thin
|
|
47
|
+
Everything sensitive — `state`, the PKCE verifier, your client secret, the tokens — lives on **your server**. The SDK is a thin navigator: it sends the tab to One's hosted connect page and never touches a token.
|
|
48
48
|
|
|
49
49
|
You build exactly **two backend routes and one button**.
|
|
50
50
|
|
|
@@ -56,7 +56,7 @@ sequenceDiagram
|
|
|
56
56
|
participant One as One Connect
|
|
57
57
|
|
|
58
58
|
User->>YourApp: Clicks "Connect your tools"
|
|
59
|
-
YourApp->>YourBackend:
|
|
59
|
+
YourApp->>YourBackend: Navigate tab → GET /api/one/authorize
|
|
60
60
|
YourBackend->>YourBackend: Mint state + PKCE, set httpOnly cookie
|
|
61
61
|
YourBackend->>One: 302 → /oauth/authorize
|
|
62
62
|
User->>One: Sign in, connect tools, narrow & grant access
|
|
@@ -65,10 +65,10 @@ sequenceDiagram
|
|
|
65
65
|
YourBackend->>One: POST /oauth/token (code + verifier + secret)
|
|
66
66
|
One->>YourBackend: Access token + refresh token
|
|
67
67
|
YourBackend->>YourApp: 302 → /?one_connect=success
|
|
68
|
-
YourApp->>User: SDK
|
|
68
|
+
YourApp->>User: SDK detects the return, onSuccess() fires
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
-
The SDK watches
|
|
71
|
+
The SDK watches for `?one_connect=` on the page URL when the tab returns — so **there is no completion page to build**.
|
|
72
72
|
|
|
73
73
|
## 1 · Create your OAuth app
|
|
74
74
|
|
|
@@ -99,7 +99,7 @@ ONE_PERMISSION_SET=79659c66-...
|
|
|
99
99
|
|
|
100
100
|
Replace the `authorize URL` with your backend authorize endpoint.
|
|
101
101
|
|
|
102
|
-
>
|
|
102
|
+
> Relative paths like `/api/one/authorize` work — the SDK resolves them against your page's origin. A full URL is only required if the authorize route lives on a different origin than the page.
|
|
103
103
|
|
|
104
104
|
```tsx
|
|
105
105
|
"use client";
|
|
@@ -120,7 +120,7 @@ export function ConnectWithOne() {
|
|
|
120
120
|
console.error("Connect failed:", error);
|
|
121
121
|
},
|
|
122
122
|
onClose: () => {
|
|
123
|
-
console.log("Connect
|
|
123
|
+
console.log("Connect flow closed");
|
|
124
124
|
},
|
|
125
125
|
});
|
|
126
126
|
|
|
@@ -142,8 +142,8 @@ export function ConnectWithOne() {
|
|
|
142
142
|
|
|
143
143
|
| Method | Description |
|
|
144
144
|
|---|---|
|
|
145
|
-
| `open()` |
|
|
146
|
-
| `close()` |
|
|
145
|
+
| `open()` | Navigates the tab to One's hosted connect flow |
|
|
146
|
+
| `close()` | No-op kept for API stability — safe to call on unmount |
|
|
147
147
|
|
|
148
148
|
|
|
149
149
|
### Optional: the pre-built button
|
|
@@ -294,18 +294,15 @@ export async function GET(req: NextRequest) {
|
|
|
294
294
|
|
|
295
295
|
const res = NextResponse.redirect(url.toString(), 302);
|
|
296
296
|
// One cookie PER flow — the name carries the state. Users open the
|
|
297
|
-
//
|
|
297
|
+
// flow more than once (retries, second tabs); a single shared cookie
|
|
298
298
|
// would be overwritten by each start, so only the LAST-opened flow
|
|
299
299
|
// could ever complete. Expiry reaps the strays.
|
|
300
300
|
res.cookies.set(`one_tx_${state}`, verifier, {
|
|
301
301
|
httpOnly: true,
|
|
302
302
|
secure: true,
|
|
303
|
-
//
|
|
304
|
-
//
|
|
305
|
-
|
|
306
|
-
// cross-site-redirected requests, so a Lax cookie is silently
|
|
307
|
-
// dropped and the state check fails.
|
|
308
|
-
sameSite: "none",
|
|
303
|
+
// The callback is a TOP-LEVEL navigation on your own site, so Lax
|
|
304
|
+
// survives the cross-site redirect chain (One -> here).
|
|
305
|
+
sameSite: "lax",
|
|
309
306
|
maxAge: 600, // matches One's 10-minute authorization-code lifetime
|
|
310
307
|
path: "/api/one",
|
|
311
308
|
});
|
|
@@ -315,7 +312,7 @@ export async function GET(req: NextRequest) {
|
|
|
315
312
|
|
|
316
313
|
## 4 · Backend — the callback route
|
|
317
314
|
|
|
318
|
-
One redirects back with a **single-use code**, worthless without your secret and the PKCE verifier. Exchange it server-side, store the tokens, then redirect anywhere on your site with `?one_connect=success` appended — the SDK
|
|
315
|
+
One redirects back with a **single-use code**, worthless without your secret and the PKCE verifier. Exchange it server-side, store the tokens, then redirect anywhere on your site with `?one_connect=success` appended — the SDK reads that parameter off the page URL on return.
|
|
319
316
|
|
|
320
317
|
```typescript
|
|
321
318
|
// app/api/one/callback/route.ts
|
|
@@ -453,19 +450,9 @@ const res = await fetch("https://api.withone.ai/v1/connections", {
|
|
|
453
450
|
|
|
454
451
|
Execute actions through `/v1/passthrough/*` with the same bearer. Every call is checked inside One against what the user granted — a call outside the grant returns `403`, and your code cannot override it. That is the point.
|
|
455
452
|
|
|
456
|
-
##
|
|
453
|
+
## Completion
|
|
457
454
|
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
If you render your own completion page instead, signal the SDK explicitly:
|
|
461
|
-
|
|
462
|
-
```tsx
|
|
463
|
-
import { completeOneConnect } from "@withone/connect";
|
|
464
|
-
|
|
465
|
-
// Returns false when there was nothing to do (not inside a frame) —
|
|
466
|
-
// render fallback UI in that case.
|
|
467
|
-
completeOneConnect({ status: "success" });
|
|
468
|
-
```
|
|
455
|
+
There is no completion page to build: your callback's final redirect carries `?one_connect=success` on any same-origin URL. The SDK detects it, fires your callbacks, and scrubs the params from the address bar. The SDK paints no result UI of its own — One's hosted page already showed the success beat before redirecting back. If you want your own celebratory screen, just have the callback redirect there; append the `?one_connect=` params wherever the SDK is mounted.
|
|
469
456
|
|
|
470
457
|
## What your users see
|
|
471
458
|
|
|
@@ -477,8 +464,7 @@ In *your* dashboard, your OAuth app lists every user who granted access, and you
|
|
|
477
464
|
|
|
478
465
|
- The client secret lives on your server only. Authenticate the token exchange with the `Authorization: Basic` header, as shown above.
|
|
479
466
|
- The authorization code is single-use and expires in 10 minutes.
|
|
480
|
-
- The SDK never handles tokens. It
|
|
481
|
-
- The SDK only trusts messages originating from its own iframe, and only accepts results from your own origin.
|
|
467
|
+
- The SDK never handles tokens. It navigates the tab to One's hosted connect page and watches for the `?one_connect=` result on the way back — there is nothing sensitive in the browser to leak.
|
|
482
468
|
|
|
483
469
|
## License
|
|
484
470
|
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,12 +1,6 @@
|
|
|
1
|
-
/** postMessage envelope type for the result, completion page → host. */
|
|
2
|
-
export declare const MESSAGE_TYPE = "@withone/connect:result";
|
|
3
|
-
/** Posted by One's connect page (cross-origin) when the user closes the
|
|
4
|
-
* card without a result. */
|
|
5
|
-
export declare const EXIT_MESSAGE_TYPE = "@withone/connect:exit";
|
|
6
1
|
/** Query params the consumer's callback route puts on its final
|
|
7
|
-
* redirect (any same-origin URL). The SDK reads them
|
|
8
|
-
*
|
|
9
|
-
* no completion page, no postMessage required. */
|
|
2
|
+
* redirect (any same-origin URL). The SDK reads them off the page URL
|
|
3
|
+
* when the tab comes home — no completion page required. */
|
|
10
4
|
export declare const RETURN_STATUS_PARAM = "one_connect";
|
|
11
5
|
export declare const RETURN_MESSAGE_PARAM = "one_connect_message";
|
|
12
6
|
/** Fragment key on the authorize URL carrying the app-chosen theme.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
1
|
export { useOneConnect } from "./useOneConnect";
|
|
2
|
-
export { completeOneConnect } from "./complete";
|
|
3
2
|
export { mountConnectButton, registerConnectButton } from "./button";
|
|
4
3
|
export type { OneConnectProps, OneConnectHandle, OneConnectResult, ConnectButtonOptions, ConnectButtonPlatform, ConnectButtonHandle, } from "./types";
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e="@withone/connect:result",t="one_connect",n="one_connect_message",o="one-connect-frame";function i(){const e=document.getElementById(o);e&&e.remove()}const r="one-connect-success";function s(e,t,n){var o;c();const i="dark"===t,s=document.createElement("div");s.id=r,Object.assign(s.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const f=l.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),s.appendChild(l),document.body.appendChild(s),requestAnimationFrame(()=>{s.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),s.style.opacity="0",window.setTimeout(()=>s.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);s.addEventListener("click",e=>{e.target===s&&h()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function c(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}function l(){return document.getElementById(o)}let a=!1;const d=r=>{var d;let p=null,u=!1;const f=null!==(d=r.mode)&&void 0!==d?d:"redirect",h=()=>{try{const e=new URL(r.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return r.appTheme&&(e.hash=`one_theme=${r.appTheme}`),e.toString()}catch{return r.authorize.url}},m=()=>{"undefined"!=typeof window&&p&&(window.removeEventListener("message",p),p=null),i()},b=(e,t)=>{if(!u){u=!0,m(),"success"===e?s("success",r.appTheme):function(e,t){s("error",e,t)}(r.appTheme,t);try{var n,o;if("success"===e)null===(n=r.onSuccess)||void 0===n||n.call(r);else null===(o=r.onError)||void 0===o||o.call(r,null!=t?t:"The connection was not completed.")}catch{}}},g=t=>{const n=t.data;if(!n)return;const o=l();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||b(n.status,n.message);else{m();try{var i;null===(i=r.onClose)||void 0===i||i.call(r)}catch{}}},w=()=>{var e;const o=l();if(!o)return;let i,r;try{var s,c;i=null!==(s=null===(c=o.contentWindow)||void 0===c?void 0:c.location.href)&&void 0!==s?s:""}catch{return}try{r=new URL(i).searchParams}catch{return}const a=r.get(t);"success"!==a&&"error"!==a||(o.style.visibility="hidden",b(a,null!==(e=r.get(n))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!a){const e=new URLSearchParams(window.location.search),o=e.get(t);if("success"===o||"error"===o){var v;a=!0;const i=null!==(v=e.get(n))&&void 0!==v?v:void 0;e.delete(t),e.delete(n);const r=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",r),window.setTimeout(()=>b(o,i),0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===f)return void window.location.assign(h());u=!1,p=g,window.addEventListener("message",p);(function(e){i();const t=document.createElement("iframe");return t.id=o,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",w)},close:e=>{null!=e&&e.keepResult||c(),m()}}};function p(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1}function u(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const f="one-connect-button-styles",h="cubic-bezier(.2,.9,.25,1)",m={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},b={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},g="#CCFF00",w="#3FE3A5",v="#0A0C0B";const x=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(f))return;const e=document.createElement("style");e.id=f,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${h},box-shadow .2s ${h},opacity .2s ${h}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${w};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${h};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${h},opacity .2s ${h}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?b:m,r=null!==(n=t.variant)&&void 0!==n?n:"default",s=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let c="idle",l=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),p=document.createElement("button");p.type="button",p.className="block"===r?"owcb owcb-block":"owcb",p.addEventListener("click",()=>{"idle"!==c&&"connected"!==c||(x("connecting"),a.open())});const u=()=>{var e,n,o;const l="accent"===r,a="block"===r,d=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:g:i.btnBg,u=a?i.fg:l?v:i.btnFg,f=a?i.surface:d,h=a?i.muted:u;p.style.background="connected"!==c||a?d:w,p.style.color="connected"!==c||a?u:v,p.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===c?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:g}38`:i.shadow,p.disabled="connecting"===c,p.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const s=document.createElement("span");s.className="owcb-stack",s.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v;s.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,s.appendChild(e)}return s}(t,f,h);if(a){var b;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(b=t.connectedLabel)&&void 0!==b?b:"Connected":s,e.appendChild(n),"connecting"===c){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(p.appendChild(e),t.description&&"idle"===c){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,p.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void p.appendChild(o)}if("connecting"===c){const e=document.createElement("span");e.className="owcb-spinner",p.appendChild(e)}else if("connected"===c){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",p.appendChild(e)}else m&&p.appendChild(m);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":s,p.appendChild(x),"idle"===c){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",p.appendChild(e)}},x=e=>{l||(c=e,u())};return u(),e.appendChild(p),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),p.remove()}}};function y(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),u(this,"onSuccess",null),u(this,"onError",null),u(this,"onClose",null),u(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,s,c,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),f=u?parseInt(u,10):void 0;this.handle=x(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(f)?f:void 0,description:null!==(s=this.getAttribute("description"))&&void 0!==s?s:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}u(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}y();export{p as completeOneConnect,x as mountConnectButton,y as registerConnectButton,d as useOneConnect};
|
|
1
|
+
const e="one_connect",t="one_connect_message";let n=!1;const o=o=>{let i=!1;if("undefined"!=typeof window&&!n){const l=new URLSearchParams(window.location.search),r=l.get(e);if("success"===r||"error"===r){var c;n=!0;const s=null!==(c=l.get(t))&&void 0!==c?c:void 0,a=()=>{const n=new URLSearchParams(window.location.search);(n.has(e)||n.has(t))&&(n.delete(e),n.delete(t),window.history.replaceState(null,"",window.location.pathname+(n.toString()?`?${n.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!i){i=!0;try{var e,t;"success"===r?null===(e=o.onSuccess)||void 0===e||e.call(o):null===(t=o.onError)||void 0===t||t.call(o,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const e=new URL(o.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return o.appTheme&&(e.hash=`one_theme=${o.appTheme}`),e.toString()}catch{return o.authorize.url}})())},close:e=>{}}};function i(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const c="one-connect-button-styles",l="cubic-bezier(.2,.9,.25,1)",r={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},s={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},a="#CCFF00",d="#3FE3A5",p="#0A0C0B";const u=(e,t)=>{var n,i;!function(){if("undefined"==typeof document||document.getElementById(c))return;const e=document.createElement("style");e.id=c,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${l},box-shadow .2s ${l},opacity .2s ${l}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${d};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${l};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${l},opacity .2s ${l}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const u="dark"===t.theme?s:r,h=null!==(n=t.variant)&&void 0!==n?n:"default",m=null!==(i=t.label)&&void 0!==i?i:"Connect your apps";let f="idle",b=!1;const w=o({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),g=document.createElement("button");g.type="button",g.className="block"===h?"owcb owcb-block":"owcb",g.addEventListener("click",()=>{"idle"!==f&&"connected"!==f||(x("connecting"),w.open())});const v=()=>{var e,n,o;const i="accent"===h,c="block"===h,l=c?u.surface:i?null!==(e=t.accentColor)&&void 0!==e?e:a:u.btnBg,r=c?u.fg:i?p:u.btnFg,s=c?u.surface:l,b=c?u.muted:r;g.style.background="connected"!==f||c?l:d,g.style.color="connected"!==f||c?r:p,g.style.boxShadow=c?`inset 0 0 0 1px ${u.line}`:"connected"===f?"none":i?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:a}38`:u.shadow,g.disabled="connecting"===f,g.innerHTML="";const w=function(e,t,n){var o,i;const c=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===c.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of c.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p;l.appendChild(n)}const r=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.length-4);if(r>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${r}`,l.appendChild(e)}return l}(t,s,b);if(c){var v;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(v=t.connectedLabel)&&void 0!==v?v:"Connected":m,e.appendChild(n),"connecting"===f){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else w&&e.appendChild(w);if(g.appendChild(e),t.description&&"idle"===f){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=u.muted,e.textContent=t.description,g.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=u.muted,o.style.borderTop=`1px solid ${u.line}`,o.innerHTML=`<span style="font-size:11px;color:${u.muted}">Secured by</span><span style="display:inline-flex;color:${u.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${u.fg}">one</span>`,void g.appendChild(o)}if("connecting"===f){const e=document.createElement("span");e.className="owcb-spinner",g.appendChild(e)}else if("connected"===f){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",g.appendChild(e)}else w&&g.appendChild(w);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":m,g.appendChild(x),"idle"===f){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",g.appendChild(e)}},x=e=>{b||(f=e,v())};return v(),e.appendChild(g),{setState:x,destroy:()=>{b=!0,w.close({keepResult:!0}),g.remove()}}};function h(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),i(this,"onSuccess",null),i(this,"onError",null),i(this,"onClose",null),i(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,c,l,r;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),h=p?parseInt(p,10):void 0;this.handle=u(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(r=this.getAttribute("connected-label"))&&void 0!==r?r:void 0})}}i(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}h();export{u as mountConnectButton,h as registerConnectButton,o as useOneConnect};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e="@withone/connect:result",t="one_connect",n="one_connect_message",o="one-connect-frame";function i(){const e=document.getElementById(o);e&&e.remove()}const r="one-connect-success";function s(e,t,n){var o;c();const i="dark"===t,s=document.createElement("div");s.id=r,Object.assign(s.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const f=l.querySelector("[data-one-result-body]");f&&(f.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),s.appendChild(l),document.body.appendChild(s),requestAnimationFrame(()=>{s.style.opacity="1"});const h=()=>{window.removeEventListener("keydown",m),s.style.opacity="0",window.setTimeout(()=>s.remove(),180)};function m(e){"Escape"===e.key&&h()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",h);s.addEventListener("click",e=>{e.target===s&&h()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function c(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}function l(){return document.getElementById(o)}let a=!1;const d=r=>{var d;let p=null,u=!1;const f=null!==(d=r.mode)&&void 0!==d?d:"redirect",h=()=>{try{const e=new URL(r.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return r.appTheme&&(e.hash=`one_theme=${r.appTheme}`),e.toString()}catch{return r.authorize.url}},m=()=>{"undefined"!=typeof window&&p&&(window.removeEventListener("message",p),p=null),i()},b=(e,t)=>{if(!u){u=!0,m(),"success"===e?s("success",r.appTheme):function(e,t){s("error",e,t)}(r.appTheme,t);try{var n,o;if("success"===e)null===(n=r.onSuccess)||void 0===n||n.call(r);else null===(o=r.onError)||void 0===o||o.call(r,null!=t?t:"The connection was not completed.")}catch{}}},g=t=>{const n=t.data;if(!n)return;const o=l();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)n.type!==e||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||b(n.status,n.message);else{m();try{var i;null===(i=r.onClose)||void 0===i||i.call(r)}catch{}}},w=()=>{var e;const o=l();if(!o)return;let i,r;try{var s,c;i=null!==(s=null===(c=o.contentWindow)||void 0===c?void 0:c.location.href)&&void 0!==s?s:""}catch{return}try{r=new URL(i).searchParams}catch{return}const a=r.get(t);"success"!==a&&"error"!==a||(o.style.visibility="hidden",b(a,null!==(e=r.get(n))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!a){const e=new URLSearchParams(window.location.search),o=e.get(t);if("success"===o||"error"===o){var v;a=!0;const i=null!==(v=e.get(n))&&void 0!==v?v:void 0;e.delete(t),e.delete(n);const r=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",r),window.setTimeout(()=>b(o,i),0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===f)return void window.location.assign(h());u=!1,p=g,window.addEventListener("message",p);(function(e){i();const t=document.createElement("iframe");return t.id=o,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",w)},close:e=>{null!=e&&e.keepResult||c(),m()}}};function p(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const u="one-connect-button-styles",f="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},m={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},b="#CCFF00",g="#3FE3A5",w="#0A0C0B";const v=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(u))return;const e=document.createElement("style");e.id=u,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${f},box-shadow .2s ${f},opacity .2s ${f}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${g};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${f};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${f},opacity .2s ${f}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?m:h,r=null!==(n=t.variant)&&void 0!==n?n:"default",s=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let c="idle",l=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),p=document.createElement("button");p.type="button",p.className="block"===r?"owcb owcb-block":"owcb",p.addEventListener("click",()=>{"idle"!==c&&"connected"!==c||(x("connecting"),a.open())});const v=()=>{var e,n,o;const l="accent"===r,a="block"===r,d=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:b:i.btnBg,u=a?i.fg:l?w:i.btnFg,f=a?i.surface:d,h=a?i.muted:u;p.style.background="connected"!==c||a?d:g,p.style.color="connected"!==c||a?u:w,p.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===c?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:b}38`:i.shadow,p.disabled="connecting"===c,p.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const s=document.createElement("span");s.className="owcb-stack",s.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=w}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=w;s.appendChild(n)}const c=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(c>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${c}`,s.appendChild(e)}return s}(t,f,h);if(a){var v;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(v=t.connectedLabel)&&void 0!==v?v:"Connected":s,e.appendChild(n),"connecting"===c){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(p.appendChild(e),t.description&&"idle"===c){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,p.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void p.appendChild(o)}if("connecting"===c){const e=document.createElement("span");e.className="owcb-spinner",p.appendChild(e)}else if("connected"===c){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",p.appendChild(e)}else m&&p.appendChild(m);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===c?"Connecting…":"connected"===c?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":s,p.appendChild(x),"idle"===c){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",p.appendChild(e)}},x=e=>{l||(c=e,v())};return v(),e.appendChild(p),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),p.remove()}}};function x(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),p(this,"onSuccess",null),p(this,"onError",null),p(this,"onClose",null),p(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,s,c,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),f=u?parseInt(u,10):void 0;this.handle=v(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(f)?f:void 0,description:null!==(s=this.getAttribute("description"))&&void 0!==s?s:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}p(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}x(),exports.completeOneConnect=function(t={status:"success"}){if("undefined"==typeof window)return!1;if(window.parent&&window.parent!==window){const n={type:e,status:t.status,message:t.message};try{return window.parent.postMessage(n,window.location.origin),!0}catch{return!1}}return!1},exports.mountConnectButton=v,exports.registerConnectButton=x,exports.useOneConnect=d;
|
|
1
|
+
"use strict";const e="one_connect",t="one_connect_message";let n=!1;const o=o=>{let i=!1;if("undefined"!=typeof window&&!n){const l=new URLSearchParams(window.location.search),r=l.get(e);if("success"===r||"error"===r){var c;n=!0;const s=null!==(c=l.get(t))&&void 0!==c?c:void 0,a=()=>{const n=new URLSearchParams(window.location.search);(n.has(e)||n.has(t))&&(n.delete(e),n.delete(t),window.history.replaceState(null,"",window.location.pathname+(n.toString()?`?${n.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!i){i=!0;try{var e,t;"success"===r?null===(e=o.onSuccess)||void 0===e||e.call(o):null===(t=o.onError)||void 0===t||t.call(o,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const e=new URL(o.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return o.appTheme&&(e.hash=`one_theme=${o.appTheme}`),e.toString()}catch{return o.authorize.url}})())},close:e=>{}}};function i(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const c="one-connect-button-styles",l="cubic-bezier(.2,.9,.25,1)",r={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},s={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},a="#CCFF00",d="#3FE3A5",p="#0A0C0B";const u=(e,t)=>{var n,i;!function(){if("undefined"==typeof document||document.getElementById(c))return;const e=document.createElement("style");e.id=c,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${l},box-shadow .2s ${l},opacity .2s ${l}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${d};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${l};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${l},opacity .2s ${l}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const u="dark"===t.theme?s:r,h=null!==(n=t.variant)&&void 0!==n?n:"default",m=null!==(i=t.label)&&void 0!==i?i:"Connect your apps";let f="idle",b=!1;const w=o({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),g=document.createElement("button");g.type="button",g.className="block"===h?"owcb owcb-block":"owcb",g.addEventListener("click",()=>{"idle"!==f&&"connected"!==f||(x("connecting"),w.open())});const v=()=>{var e,n,o;const i="accent"===h,c="block"===h,l=c?u.surface:i?null!==(e=t.accentColor)&&void 0!==e?e:a:u.btnBg,r=c?u.fg:i?p:u.btnFg,s=c?u.surface:l,b=c?u.muted:r;g.style.background="connected"!==f||c?l:d,g.style.color="connected"!==f||c?r:p,g.style.boxShadow=c?`inset 0 0 0 1px ${u.line}`:"connected"===f?"none":i?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:a}38`:u.shadow,g.disabled="connecting"===f,g.innerHTML="";const w=function(e,t,n){var o,i;const c=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===c.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of c.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p;l.appendChild(n)}const r=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.length-4);if(r>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${r}`,l.appendChild(e)}return l}(t,s,b);if(c){var v;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(v=t.connectedLabel)&&void 0!==v?v:"Connected":m,e.appendChild(n),"connecting"===f){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else w&&e.appendChild(w);if(g.appendChild(e),t.description&&"idle"===f){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=u.muted,e.textContent=t.description,g.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=u.muted,o.style.borderTop=`1px solid ${u.line}`,o.innerHTML=`<span style="font-size:11px;color:${u.muted}">Secured by</span><span style="display:inline-flex;color:${u.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${u.fg}">one</span>`,void g.appendChild(o)}if("connecting"===f){const e=document.createElement("span");e.className="owcb-spinner",g.appendChild(e)}else if("connected"===f){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",g.appendChild(e)}else w&&g.appendChild(w);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":m,g.appendChild(x),"idle"===f){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",g.appendChild(e)}},x=e=>{b||(f=e,v())};return v(),e.appendChild(g),{setState:x,destroy:()=>{b=!0,w.close({keepResult:!0}),g.remove()}}};function h(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),i(this,"onSuccess",null),i(this,"onError",null),i(this,"onClose",null),i(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,c,l,r;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),h=p?parseInt(p,10):void 0;this.handle=u(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(r=this.getAttribute("connected-label"))&&void 0!==r?r:void 0})}}i(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}h(),exports.mountConnectButton=u,exports.registerConnectButton=h,exports.useOneConnect=o;
|
package/dist/react.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react");function t(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const n="one_connect",o="one_connect_message",i="one-connect-frame";function r(){const e=document.getElementById(i);e&&e.remove()}const c="one-connect-success";function s(e,t,n){var o;l();const i="dark"===t,r=document.createElement("div");r.id=c,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const s=document.createElement("div");Object.assign(s.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",u=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",p=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";s.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${u};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${p};border:1px solid ${u};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=s.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(s),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of s.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);r.addEventListener("click",e=>{e.target===r&&f()}),window.addEventListener("keydown",m),null===(o=s.querySelector("[data-one-close]"))||void 0===o||o.focus()}function l(){var e;null===(e=document.getElementById(c))||void 0===e||e.remove()}function a(){return document.getElementById(i)}let d=!1;const u=e=>{var t;let c=null,u=!1;const p=null!==(t=e.mode)&&void 0!==t?t:"redirect",h=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},f=()=>{"undefined"!=typeof window&&c&&(window.removeEventListener("message",c),c=null),r()},m=(t,n)=>{if(!u){u=!0,f(),"success"===t?s("success",e.appTheme):function(e,t){s("error",e,t)}(e.appTheme,n);try{var o,i;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(i=e.onError)||void 0===i||i.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=a();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{f();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const t=a();if(!t)return;let i,r;try{var c,s;i=null!==(c=null===(s=t.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==c?c:""}catch{return}try{r=new URL(i).searchParams}catch{return}const l=r.get(n);"success"!==l&&"error"!==l||(t.style.visibility="hidden",m(l,null!==(e=r.get(o))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!d){const e=new URLSearchParams(window.location.search),t=e.get(n);if("success"===t||"error"===t){var v;d=!0;const i=null!==(v=e.get(o))&&void 0!==v?v:void 0;e.delete(n),e.delete(o);const r=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",r),window.setTimeout(()=>m(t,i),0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===p)return void window.location.assign(h());u=!1,c=b,window.addEventListener("message",c);(function(e){r();const t=document.createElement("iframe");return t.id=i,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||l(),f()}}},p="one-connect-button-styles",h="cubic-bezier(.2,.9,.25,1)",f={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},m={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},b="#CCFF00",g="#3FE3A5",v="#0A0C0B";const w=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${h},box-shadow .2s ${h},opacity .2s ${h}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${g};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${h};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${h},opacity .2s ${h}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?m:f,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let s="idle",l=!1;const a=u({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==s&&"connected"!==s||(x("connecting"),a.open())});const w=()=>{var e,n,o;const l="accent"===r,a="block"===r,u=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:b:i.btnBg,p=a?i.fg:l?v:i.btnFg,h=a?i.surface:u,f=a?i.muted:p;d.style.background="connected"!==s||a?u:g,d.style.color="connected"!==s||a?p:v,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===s?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:b}38`:i.shadow,d.disabled="connecting"===s,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=v;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,h,f);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===s){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===s){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===s){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===s){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,d.appendChild(x),"idle"===s){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},x=e=>{l||(s=e,w())};return w(),e.appendChild(d),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),d.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),t(this,"onSuccess",null),t(this,"onError",null),t(this,"onClose",null),t(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const u=this.getAttribute("platforms");if(u)try{const e=JSON.parse(u);Array.isArray(e)&&(d=e)}catch{}const p=this.getAttribute("more-count"),h=p?parseInt(p,10):void 0;this.handle=w(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(s=this.getAttribute("accent-color"))&&void 0!==s?s:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}t(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}(),exports.ConnectButton=function(t){var n;const o=e.useRef(null),i=e.useRef(null),r=e.useRef({onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose});r.current={onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose};const c=JSON.stringify(null!==(n=t.platforms)&&void 0!==n?n:[]);return e.useEffect(()=>{if(!o.current)return;const e={connect:{authorize:{url:t.authorizeUrl},appTheme:t.appTheme,mode:t.mode,onSuccess:()=>{var e,t;return null===(e=(t=r.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=r.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=r.current).onClose)||void 0===e?void 0:e.call(t)}},label:t.label,variant:t.variant,theme:t.theme,platforms:t.platforms,moreCount:t.moreCount,description:t.description,accentColor:t.accentColor,connectedLabel:t.connectedLabel};return i.current=w(o.current,e),()=>{var e;null===(e=i.current)||void 0===e||e.destroy(),i.current=null}},[t.authorizeUrl,t.appTheme,t.mode,t.label,t.variant,t.theme,c,t.moreCount,t.description,t.accentColor,t.connectedLabel]),e.createElement("div",{ref:o,className:t.className,style:t.style})};
|
|
1
|
+
"use strict";var e=require("react");function t(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const n="one_connect",o="one_connect_message";let i=!1;const r=e=>{let t=!1;if("undefined"!=typeof window&&!i){const c=new URLSearchParams(window.location.search),l=c.get(n);if("success"===l||"error"===l){var r;i=!0;const s=null!==(r=c.get(o))&&void 0!==r?r:void 0,a=()=>{const e=new URLSearchParams(window.location.search);(e.has(n)||e.has(o))&&(e.delete(n),e.delete(o),window.history.replaceState(null,"",window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!t){t=!0;try{var n,o;"success"===l?null===(n=e.onSuccess)||void 0===n||n.call(e):null===(o=e.onError)||void 0===o||o.call(e,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})())},close:e=>{}}},c="one-connect-button-styles",l="cubic-bezier(.2,.9,.25,1)",s={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},a={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},d="#CCFF00",p="#3FE3A5",u="#0A0C0B";const h=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(c))return;const e=document.createElement("style");e.id=c,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${l},box-shadow .2s ${l},opacity .2s ${l}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${p};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${l};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${l},opacity .2s ${l}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?a:s,h=null!==(n=t.variant)&&void 0!==n?n:"default",m=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let f="idle",b=!1;const w=r({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===h?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==f&&"connected"!==f||(x("connecting"),w.open())});const g=()=>{var e,n,o;const r="accent"===h,c="block"===h,l=c?i.surface:r?null!==(e=t.accentColor)&&void 0!==e?e:d:i.btnBg,s=c?i.fg:r?u:i.btnFg,a=c?i.surface:l,b=c?i.muted:s;v.style.background="connected"!==f||c?l:p,v.style.color="connected"!==f||c?s:u,v.style.boxShadow=c?`inset 0 0 0 1px ${i.line}`:"connected"===f?"none":r?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:d}38`:i.shadow,v.disabled="connecting"===f,v.innerHTML="";const w=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=u}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=u;c.appendChild(n)}const l=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(l>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${l}`,c.appendChild(e)}return c}(t,a,b);if(c){var g;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(g=t.connectedLabel)&&void 0!==g?g:"Connected":m,e.appendChild(n),"connecting"===f){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else w&&e.appendChild(w);if(v.appendChild(e),t.description&&"idle"===f){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===f){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===f){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else w&&v.appendChild(w);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":m,v.appendChild(x),"idle"===f){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{b||(f=e,g())};return g(),e.appendChild(v),{setState:x,destroy:()=>{b=!0,w.close({keepResult:!0}),v.remove()}}};!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),t(this,"onSuccess",null),t(this,"onError",null),t(this,"onClose",null),t(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=h(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}t(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}(),exports.ConnectButton=function(t){var n;const o=e.useRef(null),i=e.useRef(null),r=e.useRef({onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose});r.current={onSuccess:t.onSuccess,onError:t.onError,onClose:t.onClose};const c=JSON.stringify(null!==(n=t.platforms)&&void 0!==n?n:[]);return e.useEffect(()=>{if(!o.current)return;const e={connect:{authorize:{url:t.authorizeUrl},appTheme:t.appTheme,onSuccess:()=>{var e,t;return null===(e=(t=r.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=r.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=r.current).onClose)||void 0===e?void 0:e.call(t)}},label:t.label,variant:t.variant,theme:t.theme,platforms:t.platforms,moreCount:t.moreCount,description:t.description,accentColor:t.accentColor,connectedLabel:t.connectedLabel};return i.current=h(o.current,e),()=>{var e;null===(e=i.current)||void 0===e||e.destroy(),i.current=null}},[t.authorizeUrl,t.appTheme,t.label,t.variant,t.theme,c,t.moreCount,t.description,t.accentColor,t.connectedLabel]),e.createElement("div",{ref:o,className:t.className,style:t.style})};
|
package/dist/react.d.ts
CHANGED
|
@@ -4,10 +4,8 @@ export interface ConnectButtonProps {
|
|
|
4
4
|
/** The app's own backend authorize route ("/api/one/authorize" is
|
|
5
5
|
* fine — relative resolves against the page). */
|
|
6
6
|
authorizeUrl: string;
|
|
7
|
-
/** Theme for One's
|
|
7
|
+
/** Theme for One's hosted page (rides the URL fragment). */
|
|
8
8
|
appTheme?: "light" | "dark";
|
|
9
|
-
/** "redirect" (default, full-page hosted flow) or "modal" (legacy iframe). */
|
|
10
|
-
mode?: "redirect" | "modal";
|
|
11
9
|
onSuccess?: () => void;
|
|
12
10
|
onError?: (error: string) => void;
|
|
13
11
|
onClose?: () => void;
|
package/dist/react.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useRef as e,useEffect as t,createElement as n}from"react";function o(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const i="one_connect",r="one_connect_message",c="one-connect-frame";function l(){const e=document.getElementById(c);e&&e.remove()}const s="one-connect-success";function a(e,t,n){var o;d();const i="dark"===t,r=document.createElement("div");r.id=s,Object.assign(r.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const c=document.createElement("div");Object.assign(c.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const l=i?"#a1a1aa":"#6b7280",a=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";c.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${a};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${l};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${l};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${l};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=c.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),r.appendChild(c),document.body.appendChild(r),requestAnimationFrame(()=>{r.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),r.style.opacity="0",window.setTimeout(()=>r.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of c.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);r.addEventListener("click",e=>{e.target===r&&f()}),window.addEventListener("keydown",m),null===(o=c.querySelector("[data-one-close]"))||void 0===o||o.focus()}function d(){var e;null===(e=document.getElementById(s))||void 0===e||e.remove()}function p(){return document.getElementById(c)}let u=!1;const h=e=>{var t;let n=null,o=!1;const s=null!==(t=e.mode)&&void 0!==t?t:"redirect",h=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},f=()=>{"undefined"!=typeof window&&n&&(window.removeEventListener("message",n),n=null),l()},m=(t,n)=>{if(!o){o=!0,f(),"success"===t?a("success",e.appTheme):function(e,t){a("error",e,t)}(e.appTheme,n);try{var i,r;if("success"===t)null===(i=e.onSuccess)||void 0===i||i.call(e);else null===(r=e.onError)||void 0===r||r.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=p();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{f();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const t=p();if(!t)return;let n,o;try{var c,l;n=null!==(c=null===(l=t.contentWindow)||void 0===l?void 0:l.location.href)&&void 0!==c?c:""}catch{return}try{o=new URL(n).searchParams}catch{return}const s=o.get(i);"success"!==s&&"error"!==s||(t.style.visibility="hidden",m(s,null!==(e=o.get(r))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!u){const e=new URLSearchParams(window.location.search),t=e.get(i);if("success"===t||"error"===t){var v;u=!0;const n=null!==(v=e.get(r))&&void 0!==v?v:void 0;e.delete(i),e.delete(r);const o=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",o),window.setTimeout(()=>m(t,n),0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===s)return void window.location.assign(h());o=!1,n=b,window.addEventListener("message",n);(function(e){l();const t=document.createElement("iframe");return t.id=c,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||d(),f()}}},f="one-connect-button-styles",m="cubic-bezier(.2,.9,.25,1)",b={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},g={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},v="#CCFF00",w="#3FE3A5",x="#0A0C0B";const y=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(f))return;const e=document.createElement("style");e.id=f,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${m},box-shadow .2s ${m},opacity .2s ${m}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${w};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${m};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${m},opacity .2s ${m}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?g:b,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let l="idle",s=!1;const a=h({...t.connect,onSuccess:()=>{var e,n;u("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;u("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;u("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),d=document.createElement("button");d.type="button",d.className="block"===r?"owcb owcb-block":"owcb",d.addEventListener("click",()=>{"idle"!==l&&"connected"!==l||(u("connecting"),a.open())});const p=()=>{var e,n,o;const s="accent"===r,a="block"===r,p=a?i.surface:s?null!==(e=t.accentColor)&&void 0!==e?e:v:i.btnBg,u=a?i.fg:s?x:i.btnFg,h=a?i.surface:p,f=a?i.muted:u;d.style.background="connected"!==l||a?p:w,d.style.color="connected"!==l||a?u:x,d.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===l?"none":s?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:v}38`:i.shadow,d.disabled="connecting"===l,d.innerHTML="";const m=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=x}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=x;c.appendChild(n)}const l=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(l>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${l}`,c.appendChild(e)}return c}(t,h,f);if(a){var b;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(b=t.connectedLabel)&&void 0!==b?b:"Connected":c,e.appendChild(n),"connecting"===l){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else m&&e.appendChild(m);if(d.appendChild(e),t.description&&"idle"===l){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,d.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void d.appendChild(o)}if("connecting"===l){const e=document.createElement("span");e.className="owcb-spinner",d.appendChild(e)}else if("connected"===l){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}else m&&d.appendChild(m);const g=document.createElement("span");if(g.className="owcb-label",g.textContent="connecting"===l?"Connecting…":"connected"===l?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,d.appendChild(g),"idle"===l){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",d.appendChild(e)}},u=e=>{s||(l=e,p())};return p(),e.appendChild(d),{setState:u,destroy:()=>{s=!0,a.close({keepResult:!0}),d.remove()}}};function C(o){var i;const r=e(null),c=e(null),l=e({onSuccess:o.onSuccess,onError:o.onError,onClose:o.onClose});l.current={onSuccess:o.onSuccess,onError:o.onError,onClose:o.onClose};const s=JSON.stringify(null!==(i=o.platforms)&&void 0!==i?i:[]);return t(()=>{if(!r.current)return;const e={connect:{authorize:{url:o.authorizeUrl},appTheme:o.appTheme,mode:o.mode,onSuccess:()=>{var e,t;return null===(e=(t=l.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=l.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=l.current).onClose)||void 0===e?void 0:e.call(t)}},label:o.label,variant:o.variant,theme:o.theme,platforms:o.platforms,moreCount:o.moreCount,description:o.description,accentColor:o.accentColor,connectedLabel:o.connectedLabel};return c.current=y(r.current,e),()=>{var e;null===(e=c.current)||void 0===e||e.destroy(),c.current=null}},[o.authorizeUrl,o.appTheme,o.mode,o.label,o.variant,o.theme,s,o.moreCount,o.description,o.accentColor,o.connectedLabel]),n("div",{ref:r,className:o.className,style:o.style})}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),o(this,"onSuccess",null),o(this,"onError",null),o(this,"onClose",null),o(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,l,s;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),h=u?parseInt(u,10):void 0;this.handle=y(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(s=this.getAttribute("connected-label"))&&void 0!==s?s:void 0})}}o(e,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();export{C as ConnectButton};
|
|
1
|
+
import{useRef as e,useEffect as t,createElement as n}from"react";function o(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const i="one_connect",r="one_connect_message";let c=!1;const l=e=>{let t=!1;if("undefined"!=typeof window&&!c){const o=new URLSearchParams(window.location.search),l=o.get(i);if("success"===l||"error"===l){var n;c=!0;const s=null!==(n=o.get(r))&&void 0!==n?n:void 0,a=()=>{const e=new URLSearchParams(window.location.search);(e.has(i)||e.has(r))&&(e.delete(i),e.delete(r),window.history.replaceState(null,"",window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!t){t=!0;try{var n,o;"success"===l?null===(n=e.onSuccess)||void 0===n||n.call(e):null===(o=e.onError)||void 0===o||o.call(e,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})())},close:e=>{}}},s="one-connect-button-styles",a="cubic-bezier(.2,.9,.25,1)",d={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},p={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},u="#CCFF00",h="#3FE3A5",m="#0A0C0B";const f=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(s))return;const e=document.createElement("style");e.id=s,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${a},box-shadow .2s ${a},opacity .2s ${a}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${h};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${a};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${a},opacity .2s ${a}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?p:d,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let f="idle",b=!1;const w=l({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==f&&"connected"!==f||(x("connecting"),w.open())});const g=()=>{var e,n,o;const l="accent"===r,s="block"===r,a=s?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:u:i.btnBg,d=s?i.fg:l?m:i.btnFg,p=s?i.surface:a,b=s?i.muted:d;v.style.background="connected"!==f||s?a:h,v.style.color="connected"!==f||s?d:m,v.style.boxShadow=s?`inset 0 0 0 1px ${i.line}`:"connected"===f?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:u}38`:i.shadow,v.disabled="connecting"===f,v.innerHTML="";const w=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=m;c.appendChild(n)}const l=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(l>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${l}`,c.appendChild(e)}return c}(t,p,b);if(s){var g;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(g=t.connectedLabel)&&void 0!==g?g:"Connected":c,e.appendChild(n),"connecting"===f){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else w&&e.appendChild(w);if(v.appendChild(e),t.description&&"idle"===f){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===f){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===f){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else w&&v.appendChild(w);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===f){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{b||(f=e,g())};return g(),e.appendChild(v),{setState:x,destroy:()=>{b=!0,w.close({keepResult:!0}),v.remove()}}};function b(o){var i;const r=e(null),c=e(null),l=e({onSuccess:o.onSuccess,onError:o.onError,onClose:o.onClose});l.current={onSuccess:o.onSuccess,onError:o.onError,onClose:o.onClose};const s=JSON.stringify(null!==(i=o.platforms)&&void 0!==i?i:[]);return t(()=>{if(!r.current)return;const e={connect:{authorize:{url:o.authorizeUrl},appTheme:o.appTheme,onSuccess:()=>{var e,t;return null===(e=(t=l.current).onSuccess)||void 0===e?void 0:e.call(t)},onError:e=>{var t,n;return null===(t=(n=l.current).onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e,t;return null===(e=(t=l.current).onClose)||void 0===e?void 0:e.call(t)}},label:o.label,variant:o.variant,theme:o.theme,platforms:o.platforms,moreCount:o.moreCount,description:o.description,accentColor:o.accentColor,connectedLabel:o.connectedLabel};return c.current=f(r.current,e),()=>{var e;null===(e=c.current)||void 0===e||e.destroy(),c.current=null}},[o.authorizeUrl,o.appTheme,o.label,o.variant,o.theme,s,o.moreCount,o.description,o.accentColor,o.connectedLabel]),n("div",{ref:r,className:o.className,style:o.style})}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class e extends HTMLElement{constructor(...e){super(...e),o(this,"onSuccess",null),o(this,"onError",null),o(this,"onClose",null),o(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),u=p?parseInt(p,10):void 0;this.handle=f(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(u)?u:void 0,description:null!==(r=this.getAttribute("description"))&&void 0!==r?r:void 0,accentColor:null!==(c=this.getAttribute("accent-color"))&&void 0!==c?c:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}o(e,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",e)}}();export{b as ConnectButton};
|
package/dist/svelte.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one_connect",n="one_connect_message",o="one-connect-frame";function i(){const e=document.getElementById(o);e&&e.remove()}const r="one-connect-success";function c(e,t,n){var o;s();const i="dark"===t,c=document.createElement("div");c.id=r,Object.assign(c.style,{position:"fixed",inset:"0",zIndex:"2147483000",display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(8, 8, 8, 0.5)",opacity:"0",transition:"opacity 160ms ease"});const l=document.createElement("div");Object.assign(l.style,{width:"520px",maxWidth:"calc(100vw - 16px)",height:"520px",maxHeight:"calc(100vh - 16px)",display:"flex",flexDirection:"column",textAlign:"center",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"});const a=i?"#a1a1aa":"#6b7280",d=i?"rgba(25, 25, 25, 0.97)":"rgba(255, 255, 255, 0.97)",p=i?"rgba(255,255,255,0.08)":"rgba(228,228,223,0.9)",u=i?"rgba(45, 45, 44, 0.9)":"rgba(232, 232, 228, 0.95)";l.innerHTML=`<div style="position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 20px;border-radius:28px 28px 0 0;background:${d};border:1px solid ${p};border-bottom:0;"><button data-one-close aria-label="Close" style="position:absolute;top:16px;right:16px;width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer;color:${a};line-height:0;"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button><div style="width:56px;height:56px;border-radius:50%;background:${"success"===e?"#10b981":"#ef4444"};display:flex;align-items:center;justify-content:center;">`+("success"===e?'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>':'<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>')+"</div>"+`<div style="font-size:18px;font-weight:600;letter-spacing:-0.01em;color:${i?"#fafafa":"#111114"};">${"success"===e?"Access granted":"Connection failed"}</div>`+`<div data-one-result-body style="font-size:13px;line-height:1.5;max-width:280px;color:${a};"></div>`+`<button data-one-close style="width:100%;margin-top:8px;padding:11px 0;border:0;border-radius:12px;cursor:pointer;font-size:14px;font-weight:500;background:${i?"#fafafa":"#111114"};color:${i?"#111114":"#fafafa"};">Close</button></div>`+`<div style="height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:0 0 28px 28px;background:${u};border:1px solid ${p};border-top:0;">`+`<span style="font-size:11px;color:${a};">Secured by</span>`+`<span style="display:inline-flex;color:${i?"#fafafa":"#111114"};"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="12" cy="12" r="8.5"/></svg></span>`+`<span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i?"#fafafa":"#111114"};">one</span></div>`;const h=l.querySelector("[data-one-result-body]");h&&(h.textContent="success"===e?"Your tools are connected. You can pick up right where you left off.":null!=n?n:"The connection was not completed. You can close this and try again."),c.appendChild(l),document.body.appendChild(c),requestAnimationFrame(()=>{c.style.opacity="1"});const f=()=>{window.removeEventListener("keydown",m),c.style.opacity="0",window.setTimeout(()=>c.remove(),180)};function m(e){"Escape"===e.key&&f()}for(const e of l.querySelectorAll("[data-one-close]"))e.addEventListener("click",f);c.addEventListener("click",e=>{e.target===c&&f()}),window.addEventListener("keydown",m),null===(o=l.querySelector("[data-one-close]"))||void 0===o||o.focus()}function s(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}function l(){return document.getElementById(o)}let a=!1;const d=e=>{var r;let d=null,p=!1;const u=null!==(r=e.mode)&&void 0!==r?r:"redirect",h=()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}},f=()=>{"undefined"!=typeof window&&d&&(window.removeEventListener("message",d),d=null),i()},m=(t,n)=>{if(!p){p=!0,f(),"success"===t?c("success",e.appTheme):function(e,t){c("error",e,t)}(e.appTheme,n);try{var o,i;if("success"===t)null===(o=e.onSuccess)||void 0===o||o.call(e);else null===(i=e.onError)||void 0===i||i.call(e,null!=n?n:"The connection was not completed.")}catch{}}},b=t=>{const n=t.data;if(!n)return;const o=l();if(o&&t.source===o.contentWindow)if("@withone/connect:exit"!==n.type)"@withone/connect:result"!==n.type||t.origin!==window.location.origin||"success"!==n.status&&"error"!==n.status||m(n.status,n.message);else{f();try{var i;null===(i=e.onClose)||void 0===i||i.call(e)}catch{}}},g=()=>{var e;const o=l();if(!o)return;let i,r;try{var c,s;i=null!==(c=null===(s=o.contentWindow)||void 0===s?void 0:s.location.href)&&void 0!==c?c:""}catch{return}try{r=new URL(i).searchParams}catch{return}const a=r.get(t);"success"!==a&&"error"!==a||(o.style.visibility="hidden",m(a,null!==(e=r.get(n))&&void 0!==e?e:void 0))};if("undefined"!=typeof window&&!a){const e=new URLSearchParams(window.location.search),o=e.get(t);if("success"===o||"error"===o){var v;a=!0;const i=null!==(v=e.get(n))&&void 0!==v?v:void 0;e.delete(t),e.delete(n);const r=window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash;window.history.replaceState(null,"",r),window.setTimeout(()=>m(o,i),0)}}return{open:()=>{if("undefined"==typeof window)return;if("redirect"===u)return void window.location.assign(h());p=!1,d=b,window.addEventListener("message",d);(function(e){i();const t=document.createElement("iframe");return t.id=o,t.src=e,t.setAttribute("allowtransparency","true"),Object.assign(t.style,{position:"fixed",inset:"0",width:"100%",height:"100%",border:"0",zIndex:"2147483000",background:"transparent",colorScheme:"normal"}),document.body.appendChild(t),t})(h()).addEventListener("load",g)},close:e=>{null!=e&&e.keepResult||s(),f()}}},p="one-connect-button-styles",u="cubic-bezier(.2,.9,.25,1)",h={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},f={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},m="#CCFF00",b="#3FE3A5",g="#0A0C0B";const v=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(p))return;const e=document.createElement("style");e.id=p,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${u},box-shadow .2s ${u},opacity .2s ${u}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${b};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${u};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${u},opacity .2s ${u}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const i="dark"===t.theme?f:h,r=null!==(n=t.variant)&&void 0!==n?n:"default",c=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let s="idle",l=!1;const a=d({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===r?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==s&&"connected"!==s||(x("connecting"),a.open())});const w=()=>{var e,n,o;const l="accent"===r,a="block"===r,d=a?i.surface:l?null!==(e=t.accentColor)&&void 0!==e?e:m:i.btnBg,p=a?i.fg:l?g:i.btnFg,u=a?i.surface:d,h=a?i.muted:p;v.style.background="connected"!==s||a?d:b,v.style.color="connected"!==s||a?p:g,v.style.boxShadow=a?`inset 0 0 0 1px ${i.line}`:"connected"===s?"none":l?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:m}38`:i.shadow,v.disabled="connecting"===s,v.innerHTML="";const f=function(e,t,n){var o,i;const r=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===r.length&&!e.moreCount)return null;const c=document.createElement("span");c.className="owcb-stack",c.setAttribute("aria-hidden","true");for(const e of r.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=g;c.appendChild(n)}const s=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,r.length-4);if(s>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${s}`,c.appendChild(e)}return c}(t,u,h);if(a){var w;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(w=t.connectedLabel)&&void 0!==w?w:"Connected":c,e.appendChild(n),"connecting"===s){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else f&&e.appendChild(f);if(v.appendChild(e),t.description&&"idle"===s){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=i.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=i.muted,o.style.borderTop=`1px solid ${i.line}`,o.innerHTML=`<span style="font-size:11px;color:${i.muted}">Secured by</span><span style="display:inline-flex;color:${i.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${i.fg}">one</span>`,void v.appendChild(o)}if("connecting"===s){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===s){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else f&&v.appendChild(f);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===s?"Connecting…":"connected"===s?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":c,v.appendChild(x),"idle"===s){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{l||(s=e,w())};return w(),e.appendChild(v),{setState:x,destroy:()=>{l=!0,a.close({keepResult:!0}),v.remove()}}};function w(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,mode:e.mode,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,r,c,s,l;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const a=this.getAttribute("authorize-url");if(!a)return;let d;const p=this.getAttribute("platforms");if(p)try{const e=JSON.parse(p);Array.isArray(e)&&(d=e)}catch{}const u=this.getAttribute("more-count"),h=u?parseInt(u,10):void 0;this.handle=v(this,{connect:{authorize:{url:a},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,mode:null!==(n=this.getAttribute("mode"))&&void 0!==n?n:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(o=this.getAttribute("label"))&&void 0!==o?o:void 0,variant:null!==(i=this.getAttribute("variant"))&&void 0!==i?i:void 0,theme:null!==(r=this.getAttribute("theme"))&&void 0!==r?r:void 0,platforms:d,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(s=this.getAttribute("accent-color"))&&void 0!==s?s:void 0,connectedLabel:null!==(l=this.getAttribute("connected-label"))&&void 0!==l?l:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","mode","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}(),exports.connectButton=function(e,t){let n=v(e,w(t));return{update(t){n.destroy(),n=v(e,w(t))},destroy(){n.destroy()}}};
|
|
1
|
+
"use strict";function e(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t);if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const t="one_connect",n="one_connect_message";let o=!1;const i=e=>{let i=!1;if("undefined"!=typeof window&&!o){const l=new URLSearchParams(window.location.search),r=l.get(t);if("success"===r||"error"===r){var c;o=!0;const s=null!==(c=l.get(n))&&void 0!==c?c:void 0,a=()=>{const e=new URLSearchParams(window.location.search);(e.has(t)||e.has(n))&&(e.delete(t),e.delete(n),window.history.replaceState(null,"",window.location.pathname+(e.toString()?`?${e.toString()}`:"")+window.location.hash))};a();for(const e of[50,500,2e3])window.setTimeout(a,e);window.setTimeout(()=>{if(!i){i=!0;try{var t,n;"success"===r?null===(t=e.onSuccess)||void 0===t||t.call(e):null===(n=e.onError)||void 0===n||n.call(e,null!=s?s:"The connection was not completed.")}catch{}}},0)}}return{open:()=>{"undefined"!=typeof window&&window.location.assign((()=>{try{const t=new URL(e.authorize.url,"undefined"==typeof window?void 0:window.location.origin);return e.appTheme&&(t.hash=`one_theme=${e.appTheme}`),t.toString()}catch{return e.authorize.url}})())},close:e=>{}}},c="one-connect-button-styles",l="cubic-bezier(.2,.9,.25,1)",r={btnBg:"#0A0C0B",btnFg:"#ffffff",surface:"#ffffff",fg:"#0A0C0B",muted:"#6B7280",line:"#D1D5DB",shadow:"0 1px 2px rgba(10,12,11,.08), 0 4px 14px rgba(10,12,11,.06)"},s={btnBg:"#F2F5F3",btnFg:"#0A0C0B",surface:"#101312",fg:"#F2F5F3",muted:"#8A938E",line:"#2A302D",shadow:"0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35)"},a="#CCFF00",d="#3FE3A5",p="#0A0C0B";const u=(e,t)=>{var n,o;!function(){if("undefined"==typeof document||document.getElementById(c))return;const e=document.createElement("style");e.id=c,e.textContent=[`.owcb{font:500 14.5px/1.2 inherit;font-family:inherit;letter-spacing:-.01em;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;border-radius:12px;transition:transform .2s ${l},box-shadow .2s ${l},opacity .2s ${l}}`,".owcb:hover{transform:translateY(-1px)}",".owcb:active{transform:translateY(0)}",`.owcb:focus-visible{outline:2px solid ${d};outline-offset:3px}`,".owcb[disabled]{cursor:default;opacity:.75;transform:none}",".owcb-stack{display:inline-flex;align-items:center;flex-shrink:0}",`.owcb-chip{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-left:-7px;transition:margin-left .28s ${l};position:relative}`,".owcb-chip:first-child{margin-left:0}",".owcb-chip img{width:14px;height:14px;display:block;object-fit:contain}",".owcb-chip.owcb-more{font-family:ui-monospace,monospace;font-size:9px;font-weight:500;letter-spacing:-.02em}",".owcb:hover .owcb-chip{margin-left:-2px}",".owcb:hover .owcb-chip:first-child{margin-left:0}",".owcb-label{white-space:nowrap}",`.owcb-arrow{opacity:.5;transition:transform .2s ${l},opacity .2s ${l}}`,".owcb:hover .owcb-arrow{transform:translateX(2px);opacity:.8}",".owcb-spinner{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.7;animation:owcb-spin .7s linear infinite}","@keyframes owcb-spin{to{transform:rotate(360deg)}}",".owcb.owcb-block{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:420px;text-align:left;padding:16px;border-radius:14px;gap:0}",".owcb-block-top{display:flex;align-items:center;justify-content:space-between;gap:12px}",".owcb-block-title{font-size:15px;font-weight:600;letter-spacing:-.01em}",".owcb-block-sub{font-size:13px;line-height:1.5;margin-top:6px;font-weight:400}",".owcb-block-foot{margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:400}","@media (prefers-reduced-motion:reduce){.owcb,.owcb-chip,.owcb-arrow{transition:none}.owcb-spinner{animation-duration:1.4s}}"].join("\n"),document.head.appendChild(e)}();const u="dark"===t.theme?s:r,h=null!==(n=t.variant)&&void 0!==n?n:"default",m=null!==(o=t.label)&&void 0!==o?o:"Connect your apps";let f="idle",b=!1;const w=i({...t.connect,onSuccess:()=>{var e,n;x("connected"),null===(e=(n=t.connect).onSuccess)||void 0===e||e.call(n)},onError:e=>{var n,o;x("idle"),null===(n=(o=t.connect).onError)||void 0===n||n.call(o,e)},onClose:()=>{var e,n;x("idle"),null===(e=(n=t.connect).onClose)||void 0===e||e.call(n)}}),v=document.createElement("button");v.type="button",v.className="block"===h?"owcb owcb-block":"owcb",v.addEventListener("click",()=>{"idle"!==f&&"connected"!==f||(x("connecting"),w.open())});const g=()=>{var e,n,o;const i="accent"===h,c="block"===h,l=c?u.surface:i?null!==(e=t.accentColor)&&void 0!==e?e:a:u.btnBg,r=c?u.fg:i?p:u.btnFg,s=c?u.surface:l,b=c?u.muted:r;v.style.background="connected"!==f||c?l:d,v.style.color="connected"!==f||c?r:p,v.style.boxShadow=c?`inset 0 0 0 1px ${u.line}`:"connected"===f?"none":i?`0 1px 2px rgba(10,12,11,.1), 0 6px 20px ${null!==(n=t.accentColor)&&void 0!==n?n:a}38`:u.shadow,v.disabled="connecting"===f,v.innerHTML="";const w=function(e,t,n){var o,i;const c=null!==(o=e.platforms)&&void 0!==o?o:[];if(0===c.length&&!e.moreCount)return null;const l=document.createElement("span");l.className="owcb-stack",l.setAttribute("aria-hidden","true");for(const e of c.slice(0,4)){const n=document.createElement("span");if(n.className="owcb-chip",n.style.background="#ffffff",n.style.boxShadow=`0 0 0 1.5px ${t}`,e.imageUrl){const t=document.createElement("img");t.alt="",t.src=e.imageUrl,t.addEventListener("error",()=>{t.style.display="none",n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p}),n.appendChild(t)}else n.textContent=e.name.charAt(0).toUpperCase(),n.style.font="600 10px ui-monospace,monospace",n.style.color=p;l.appendChild(n)}const r=(null!==(i=e.moreCount)&&void 0!==i?i:0)+Math.max(0,c.length-4);if(r>0){const e=document.createElement("span");e.className="owcb-chip owcb-more",e.style.background="#ffffff",e.style.boxShadow=`0 0 0 1.5px ${t}`,e.style.color=n,e.textContent=`+${r}`,l.appendChild(e)}return l}(t,s,b);if(c){var g;const e=document.createElement("span");e.className="owcb-block-top";const n=document.createElement("span");if(n.className="owcb-block-title",n.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(g=t.connectedLabel)&&void 0!==g?g:"Connected":m,e.appendChild(n),"connecting"===f){const t=document.createElement("span");t.className="owcb-spinner",e.appendChild(t)}else w&&e.appendChild(w);if(v.appendChild(e),t.description&&"idle"===f){const e=document.createElement("span");e.className="owcb-block-sub",e.style.color=u.muted,e.textContent=t.description,v.appendChild(e)}const o=document.createElement("span");return o.className="owcb-block-foot",o.style.color=u.muted,o.style.borderTop=`1px solid ${u.line}`,o.innerHTML=`<span style="font-size:11px;color:${u.muted}">Secured by</span><span style="display:inline-flex;color:${u.fg}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" style="flex-shrink:0"><circle cx="12" cy="12" r="8.5"/></svg></span><span style="font-size:12px;font-weight:600;letter-spacing:-0.02em;color:${u.fg}">one</span>`,void v.appendChild(o)}if("connecting"===f){const e=document.createElement("span");e.className="owcb-spinner",v.appendChild(e)}else if("connected"===f){const e=document.createElement("span");e.innerHTML='<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M3 8.5l3.5 3.5L13 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}else w&&v.appendChild(w);const x=document.createElement("span");if(x.className="owcb-label",x.textContent="connecting"===f?"Connecting…":"connected"===f?null!==(o=t.connectedLabel)&&void 0!==o?o:"Connected":m,v.appendChild(x),"idle"===f){const e=document.createElement("span");e.innerHTML='<svg class="owcb-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3l5 5-5 5"/></svg>',e.style.display="inline-flex",v.appendChild(e)}},x=e=>{b||(f=e,g())};return g(),e.appendChild(v),{setState:x,destroy:()=>{b=!0,w.close({keepResult:!0}),v.remove()}}};function h(e,t){const n=e;return{connect:{authorize:{url:e.authorizeUrl},appTheme:e.appTheme,onSuccess:()=>{var e;return null===(e=n.onSuccess)||void 0===e?void 0:e.call(n)},onError:e=>{var t;return null===(t=n.onError)||void 0===t?void 0:t.call(n,e)},onClose:()=>{var e;return null===(e=n.onClose)||void 0===e?void 0:e.call(n)}},label:e.label,variant:e.variant,theme:e.theme,platforms:e.platforms,moreCount:e.moreCount,description:e.description,accentColor:e.accentColor,connectedLabel:e.connectedLabel}}!function(){if("undefined"!=typeof window&&"undefined"!=typeof customElements&&!customElements.get("one-connect-button")){class t extends HTMLElement{constructor(...t){super(...t),e(this,"onSuccess",null),e(this,"onError",null),e(this,"onClose",null),e(this,"handle",null)}connectedCallback(){this.mount()}disconnectedCallback(){var e;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null}attributeChangedCallback(){this.isConnected&&this.handle&&this.mount()}mount(){var e,t,n,o,i,c,l,r;null===(e=this.handle)||void 0===e||e.destroy(),this.handle=null;const s=this.getAttribute("authorize-url");if(!s)return;let a;const d=this.getAttribute("platforms");if(d)try{const e=JSON.parse(d);Array.isArray(e)&&(a=e)}catch{}const p=this.getAttribute("more-count"),h=p?parseInt(p,10):void 0;this.handle=u(this,{connect:{authorize:{url:s},appTheme:null!==(t=this.getAttribute("app-theme"))&&void 0!==t?t:void 0,onSuccess:()=>{var e;null===(e=this.onSuccess)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("success"))},onError:e=>{var t;null===(t=this.onError)||void 0===t||t.call(this,e),this.dispatchEvent(new CustomEvent("error",{detail:e}))},onClose:()=>{var e;null===(e=this.onClose)||void 0===e||e.call(this),this.dispatchEvent(new CustomEvent("close"))}},label:null!==(n=this.getAttribute("label"))&&void 0!==n?n:void 0,variant:null!==(o=this.getAttribute("variant"))&&void 0!==o?o:void 0,theme:null!==(i=this.getAttribute("theme"))&&void 0!==i?i:void 0,platforms:a,moreCount:Number.isFinite(h)?h:void 0,description:null!==(c=this.getAttribute("description"))&&void 0!==c?c:void 0,accentColor:null!==(l=this.getAttribute("accent-color"))&&void 0!==l?l:void 0,connectedLabel:null!==(r=this.getAttribute("connected-label"))&&void 0!==r?r:void 0})}}e(t,"observedAttributes",["authorize-url","app-theme","label","variant","theme","platforms","more-count","description","accent-color","connected-label"]),customElements.define("one-connect-button",t)}}(),exports.connectButton=function(e,t){let n=u(e,h(t));return{update(t){n.destroy(),n=u(e,h(t))},destroy(){n.destroy()}}};
|