@openhive-eu/payment 1.0.0-next.0 → 1.0.0-next.8

package/dist/components/error-fallback.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateResult } from "lit";
+export declare function renderError(): TemplateResult;

package/dist/index.js

@@ -242,7 +242,7 @@ let f2 = class extends HTMLElement {
 f2.elementStyles = [], f2.shadowRootOptions = { mode: "open" }, f2[v2("elementProperties")] = /* @__PURE__ */ new Map(), f2[v2("finalized")] = /* @__PURE__ */ new Map(), m1?.({ ReactiveElement: f2 }), (q2.reactiveElementVersions ??= []).push("2.1.2");
 const y0 = globalThis, M0 = (t) => t, z2 = y0.trustedTypes, T0 = z2 ? z2.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, Ee = "$lit$", t2 = `lit$${Math.random().toFixed(9).slice(2)}$`, Ae = "?" + t2, y1 = `<${Ae}>`, s2 = document, _2 = () => s2.createComment(""), w2 = (t) => t === null || typeof t != "object" && typeof t != "function", g0 = Array.isArray, g1 = (t) => g0(t) || typeof t?.[Symbol.iterator] == "function", r0 = `[ 	
 \f\r]`, g2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, L0 = /-->/g, F0 = />/g, o2 = RegExp(`>|${r0}(?:([^\\s"'>=/]+)(${r0}*=${r0}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), V0 = /'/g, D0 = /"/g, Se = /^(?:script|style|textarea|title)$/i, b1 = (t) => (e, ...r) => ({ _$litType$: t, strings: e, values: r }), C = b1(1), h2 = /* @__PURE__ */ Symbol.for("lit-noChange"), _ = /* @__PURE__ */ Symbol.for("lit-nothing"), H0 = /* @__PURE__ */ new WeakMap(), a2 = s2.createTreeWalker(s2, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), V0 = /'/g, D0 = /"/g, Se = /^(?:script|style|textarea|title)$/i, b1 = (t) => (e, ...r) => ({ _$litType$: t, strings: e, values: r }), v = b1(1), h2 = /* @__PURE__ */ Symbol.for("lit-noChange"), _ = /* @__PURE__ */ Symbol.for("lit-nothing"), H0 = /* @__PURE__ */ new WeakMap(), a2 = s2.createTreeWalker(s2, 129);
 function Ne(t, e) {
   if (!g0(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return T0 !== void 0 ? T0.createHTML(e) : e;
@@ -272,8 +272,8 @@ class x2 {
     for (; (d = a2.nextNode()) !== null && s.length < a; ) {
       if (d.nodeType === 1) {
         if (d.hasAttributes()) for (const $ of d.getAttributeNames()) if ($.endsWith(Ee)) {
-          const u = c[i++], g = d.getAttribute($).split(t2), v = /([.?@])?(.*)/.exec(u);
-          s.push({ type: 1, index: o, name: v[2], strings: g, ctor: v[1] === "." ? _1 : v[1] === "?" ? w1 : v[1] === "@" ? x1 : X2 }), d.removeAttribute($);
+          const u = c[i++], g = d.getAttribute($).split(t2), C = /([.?@])?(.*)/.exec(u);
+          s.push({ type: 1, index: o, name: C[2], strings: g, ctor: C[1] === "." ? _1 : C[1] === "?" ? w1 : C[1] === "@" ? x1 : X2 }), d.removeAttribute($);
         } else $.startsWith(t2) && (s.push({ type: 6, index: o }), d.removeAttribute($));
         if (Se.test(d.tagName)) {
           const $ = d.textContent.split(t2), u = $.length - 1;
@@ -542,7 +542,7 @@ function V1(t) {
   async function c($, u) {
     const {
       baseUrl: g,
-      fetch: v = n,
+      fetch: C = n,
       Request: S = r,
       headers: x,
       params: I = {},
@@ -593,7 +593,7 @@ function V1(t) {
     if (L.length) {
       J = F1(), D = Object.freeze({
         baseUrl: m,
-        fetch: v,
+        fetch: C,
         parseAs: V,
         querySerializer: O,
         bodySerializer: B
@@ -619,7 +619,7 @@ function V1(t) {
     }
     if (!b) {
       try {
-        b = await v(A, a);
+        b = await C(A, a);
       } catch (f) {
         let P = f;
         if (L.length)
@@ -1731,8 +1731,8 @@ var Mt = ";ext=", u2 = function(e) {
   return "([".concat(H, "]{1,").concat(e, "})");
 };
 function Fe(t) {
-  var e = "20", r = "15", n = "9", d = "6", o = "[  \\t,]*", i = "[:\\.．]?[  \\t,-]*", a = "#?", s = "(?:e?xt(?:ensi(?:ó?|ó))?n?|ｅ?ｘｔｎ?|доб|anexo)", l = "(?:[xｘ#＃~～]|int|ｉｎｔ)", c = "[- ]+", $ = "[  \\t]*", u = "(?:,{2}|;)", g = Mt + u2(e), v = o + s + i + u2(e) + a, S = o + l + i + u2(n) + a, x = c + u2(d) + "#", I = $ + u + i + u2(r) + a, V = $ + "(?:,)+" + i + u2(n) + a;
-  return g + "|" + v + "|" + S + "|" + x + "|" + I + "|" + V;
+  var e = "20", r = "15", n = "9", d = "6", o = "[  \\t,]*", i = "[:\\.．]?[  \\t,-]*", a = "#?", s = "(?:e?xt(?:ensi(?:ó?|ó))?n?|ｅ?ｘｔｎ?|доб|anexo)", l = "(?:[xｘ#＃~～]|int|ｉｎｔ)", c = "[- ]+", $ = "[  \\t]*", u = "(?:,{2}|;)", g = Mt + u2(e), C = o + s + i + u2(e) + a, S = o + l + i + u2(n) + a, x = c + u2(d) + "#", I = $ + u + i + u2(r) + a, V = $ + "(?:,)+" + i + u2(n) + a;
+  return g + "|" + C + "|" + S + "|" + x + "|" + I + "|" + V;
 }
 var Tt = "[" + H + "]{" + w0 + "}", Lt = "[" + x0 + "]{0,1}(?:[" + Z2 + "]*[" + H + "]){3,}[" + Z2 + H + "]*", Ft = new RegExp("^[" + x0 + "]{0,1}(?:[" + Z2 + "]*[" + H + "]){1,2}$", "i"), Vt = Lt + // Phone number extensions
 "(?:" + Fe() + ")?", Dt = new RegExp(
@@ -2289,16 +2289,16 @@ function Rr(t, e, r) {
     var g = new Qt(c, l, r.metadata);
     return s && (g.country = s), u && (g.carrierCode = u), o && (g.ext = o), g.__countryCallingCodeSource = $, g;
   }
-  var v = (e.extended ? r.hasSelectedNumberingPlan() : s) ? Y(l, r.nationalNumberPattern()) : !1;
+  var C = (e.extended ? r.hasSelectedNumberingPlan() : s) ? Y(l, r.nationalNumberPattern()) : !1;
   return e.extended ? {
     country: s,
     countryCallingCode: c,
     carrierCode: u,
-    valid: v,
-    possible: v ? !0 : !!(e.extended === !0 && r.possibleLengths() && Me(l, s, r)),
+    valid: C,
+    possible: C ? !0 : !!(e.extended === !0 && r.possibleLengths() && Me(l, s, r)),
     phone: l,
     ext: o
-  } : v ? Tr(s, l, o) : {};
+  } : C ? Tr(s, l, o) : {};
 }
 function Ir(t, e, r) {
   if (t) {
@@ -2674,8 +2674,8 @@ const pe = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, he = Ge, R
     return u === void 0 || (l[$] = u), l;
   }, {}), s = e == null || (n = e.compoundVariants) === null || n === void 0 ? void 0 : n.reduce((l, c) => {
     let { class: $, className: u, ...g } = c;
-    return Object.entries(g).every((v) => {
-      let [S, x] = v;
+    return Object.entries(g).every((C) => {
+      let [S, x] = C;
       return Array.isArray(x) ? x.includes({
         ...o,
         ...a
@@ -2859,8 +2859,8 @@ const pe = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, he = Ge, R
        */
       $.startsWith(f0) && (u = $.slice(1), g = !0)
     );
-    const v = l && l > s ? l - s : void 0;
-    return ge(o, g, u, v);
+    const C = l && l > s ? l - s : void 0;
+    return ge(o, g, u, C);
   };
   if (e) {
     const d = e + ye, o = n;
@@ -2905,20 +2905,20 @@ const pe = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, he = Ge, R
       isExternal: $,
       modifiers: u,
       hasImportantModifier: g,
-      baseClassName: v,
+      baseClassName: C,
       maybePostfixModifierPosition: S
     } = r(c);
     if ($) {
       s = c + (s.length > 0 ? " " + s : s);
       continue;
     }
-    let x = !!S, I = n(x ? v.substring(0, S) : v);
+    let x = !!S, I = n(x ? C.substring(0, S) : C);
     if (!I) {
       if (!x) {
         s = c + (s.length > 0 ? " " + s : s);
         continue;
       }
-      if (I = n(v), !I) {
+      if (I = n(C), !I) {
         s = c + (s.length > 0 ? " " + s : s);
         continue;
       }
@@ -2976,7 +2976,7 @@ const pe = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, he = Ge, R
   const n = qe.exec(t);
   return n ? n[1] ? e(n[1]) : r : !1;
 }, Ye = (t) => t === "position" || t === "percentage", Je = (t) => t === "image" || t === "url", Qe = (t) => t === "length" || t === "size" || t === "bg-size", e1 = (t) => t === "length", Kn = (t) => t === "number", t1 = (t) => t === "family-name", r1 = (t) => t === "number" || t === "weight", n1 = (t) => t === "shadow", qn = () => {
-  const t = N("color"), e = N("font"), r = N("text"), n = N("font-weight"), d = N("tracking"), o = N("leading"), i = N("breakpoint"), a = N("container"), s = N("spacing"), l = N("radius"), c = N("shadow"), $ = N("inset-shadow"), u = N("text-shadow"), g = N("drop-shadow"), v = N("blur"), S = N("perspective"), x = N("aspect"), I = N("ease"), V = N("animate"), j = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], B = () => [
+  const t = N("color"), e = N("font"), r = N("text"), n = N("font-weight"), d = N("tracking"), o = N("leading"), i = N("breakpoint"), a = N("container"), s = N("spacing"), l = N("radius"), c = N("shadow"), $ = N("inset-shadow"), u = N("text-shadow"), g = N("drop-shadow"), C = N("blur"), S = N("perspective"), x = N("aspect"), I = N("ease"), V = N("animate"), j = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], B = () => [
     "center",
     "top",
     "bottom",
@@ -3014,7 +3014,7 @@ const pe = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, he = Ge, R
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
-    v,
+    C,
     h,
     p
   ], L2 = () => ["none", y, h, p], F2 = () => ["none", y, h, p], t0 = () => [y, h, p], V2 = () => [Q, "full", ...m()];
@@ -5648,7 +5648,7 @@ const Jn = R2(
 );
 function we(t, e) {
   const { type: r = "button", variant: n, size: d, disabled: o, onClick: i } = t;
-  return C`
+  return v`
     <button
       type=${r}
       class=${p0(Jn({ variant: n, size: d }), t.class)}
@@ -5660,14 +5660,14 @@ function we(t, e) {
   `;
 }
 function U2(t, e) {
-  return C`<label
+  return v`<label
     for=${e}
     class="pay:flex pay:items-center pay:gap-2 pay:text-sm pay:leading-none pay:font-medium pay:select-none"
     >${t}</label
   >`;
 }
 function a0(t) {
-  return t ? C`<div
+  return t ? v`<div
     role="alert"
     class="pay:text-destructive pay:text-sm pay:font-normal"
   >
@@ -5675,7 +5675,7 @@ function a0(t) {
   </div>` : _;
 }
 function Qn(t = "") {
-  return C`<div
+  return v`<div
     class="pay:bg-accent pay:animate-pulse pay:rounded-md ${t}"
   ></div>`;
 }
@@ -5683,7 +5683,7 @@ function ed() {
   return Qn("pay:h-16 pay:w-full pay:rounded-xl");
 }
 function td() {
-  return C`<svg
+  return v`<svg
     role="status"
     aria-label="Loading"
     class="pay:size-4 pay:animate-spin"
@@ -5704,7 +5704,7 @@ const rd = R2(
   "pay:pointer-events-none pay:absolute pay:size-2 pay:rounded-full pay:bg-primary pay:top-1/2 pay:left-1/2 pay:-translate-x-1/2 pay:-translate-y-1/2 pay:scale-0 pay:peer-checked:scale-100 pay:transition-transform pay:duration-200"
 );
 function d1(t) {
-  return C`
+  return v`
     <div class="pay:relative pay:shrink-0 pay:w-4 pay:h-4">
       <input
         type="radio"
@@ -5733,14 +5733,14 @@ const o1 = R2(
   }
 );
 function dd(t) {
-  return C`
+  return v`
     <label class=${o1({ size: "method" })}>
       ${d1(t)}
       <div
         class="pay:flex pay:items-center pay:gap-1 pay:grow pay:justify-between pay:ml-2"
       >
         <span class="pay:text-sm pay:font-medium">${t.label}</span>
-        ${t.logoUrl ? C`<span
+        ${t.logoUrl ? v`<span
               class="pay:relative pay:inline-flex pay:h-4 pay:shrink-0"
               role="img"
               aria-label=${t.label}
@@ -5761,7 +5761,7 @@ function dd(t) {
   `;
 }
 function xe(t) {
-  return C`
+  return v`
     <label class=${o1({ size: "channel" })}>
       ${d1(t)}
       <div
@@ -5775,7 +5775,7 @@ function xe(t) {
 }
 const od = R2(
   "pay:file:text-foreground pay:placeholder:text-muted-foreground pay:selection:bg-primary pay:selection:text-primary-foreground pay:border-input pay:h-9 pay:w-full pay:min-w-0 pay:rounded-md pay:border pay:bg-transparent pay:px-3 pay:py-1 pay:text-sm pay:shadow-xs pay:transition-[color,box-shadow] pay:outline-none pay:disabled:pointer-events-none pay:disabled:cursor-not-allowed pay:disabled:opacity-50 pay:focus-visible:border-ring pay:focus-visible:ring-ring/50 pay:focus-visible:ring-[3px] pay:aria-invalid:ring-destructive/20 pay:aria-invalid:border-destructive"
-), j2 = od(), id = C`<svg
+), j2 = od(), id = v`<svg
   class="pay:size-4 pay:text-muted-foreground"
   viewBox="0 0 24 24"
   fill="none"
@@ -5786,7 +5786,7 @@ const od = R2(
 >
   <rect x="2" y="4" width="20" height="16" rx="2" />
   <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
-</svg>`, ad = C`<svg
+</svg>`, ad = v`<svg
   class="pay:size-4 pay:text-muted-foreground"
   viewBox="0 0 24 24"
   fill="none"
@@ -5798,14 +5798,14 @@ const od = R2(
   <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
 </svg>`;
 function sd(t) {
-  return C`
+  return v`
     <select
       class="pay:border-input pay:h-9 pay:flex-shrink-0 pay:rounded-md pay:border pay:bg-transparent pay:px-3 pay:py-1 pay:text-sm pay:shadow-xs pay:transition-[color,box-shadow] pay:outline-none pay:focus-visible:ring-[3px] pay:focus-visible:border-ring pay:focus-visible:ring-ring/50 pay:cursor-pointer"
       aria-label=${t.label}
       @change=${t.onChange}
     >
       ${Ue.map(
-    (e) => C`
+    (e) => v`
           <option value=${e.code} ?selected=${e.code === t.value}>
             ${e.flag} ${e.code} ${e.dial}
           </option>
@@ -5814,14 +5814,24 @@ function sd(t) {
     </select>
   `;
 }
-var ld = Object.defineProperty, E = (t, e, r, n) => {
+function ld() {
+  return v`
+    <div
+      role="alert"
+      class="pay:bg-red-50 pay:border pay:border-red-400 pay:text-red-700 pay:p-4 pay:rounded-md"
+    >
+      <p>Something went wrong while loading the payment component.</p>
+    </div>
+  `;
+}
+var $d = Object.defineProperty, E = (t, e, r, n) => {
   for (var d = void 0, o = t.length - 1, i; o >= 0; o--)
     (i = t[o]) && (d = i(e, r, d) || d);
-  return d && ld(e, r, d), d;
+  return d && $d(e, r, d), d;
 };
 class w extends C2 {
   constructor() {
-    super(...arguments), this.token = "", this.currency = "EUR", this.defaultAmount = "", this.defaultReference = "", this.readOnlyAmount = !1, this.customerName = "", this.customerEmail = "", this.customerPhone = "", this.locale = "fr", this.payClientRef = "", this._amount = "", this._email = "", this._phone = "", this._paymentReference = "", this._method = "", this._channel = void 0, this._country = an.code, this._loading = !1, this._success = !1, this._paymentMethods = [], this._methodsLoading = !0, this._methodsError = null, this._initialized = !1, this._t = o0("fr"), this._apiUrl = void 0;
+    super(...arguments), this.token = "", this.currency = "EUR", this.defaultAmount = "", this.defaultReference = "", this.readOnlyAmount = !1, this.customerName = "", this.customerEmail = "", this.customerPhone = "", this.locale = "fr", this.payClientRef = "", this._amount = "", this._email = "", this._phone = "", this._paymentReference = "", this._method = "", this._channel = void 0, this._country = an.code, this._loading = !1, this._success = !1, this._paymentMethods = [], this._methodsLoading = !0, this._methodsError = null, this._initialized = !1, this._t = o0("fr"), this._apiUrl = "https://localhost:4004";
   }
   createRenderRoot() {
     return this;
@@ -5922,9 +5932,7 @@ class w extends C2 {
     );
   }
   _renderMethods() {
-    return this._methodsLoading ? ed() : this._methodsError ? C`<p class="pay:text-sm pay:text-destructive">
-        ${this._methodsError}
-      </p>` : this._paymentMethods.map(
+    return this._methodsLoading ? ed() : this._paymentMethods.map(
       (e) => dd({
         name: "payment-method",
         value: e.id,
@@ -5936,7 +5944,7 @@ class w extends C2 {
     );
   }
   _renderChannels() {
-    return C`
+    return v`
       ${xe({
       name: "channel",
       value: "email",
@@ -5957,7 +5965,7 @@ class w extends C2 {
   }
   _renderForm() {
     const e = this._amount ? !this._validateAmount(this._amount) : !1, r = this._email ? !$e(this._email) : !1, n = this._phone ? !ce(this._country, this._phone) : !1;
-    return C`
+    return v`
       <form @submit=${this._onSubmit} class="pay:space-y-4">
         <p
           class="pay:text-xl pay:font-bold pay:text-accent-foreground pay:text-center"
@@ -6012,7 +6020,7 @@ class w extends C2 {
           <div class="pay:grid pay:gap-1">${this._renderMethods()}</div>
         </div>
 
-        ${this._method ? C`
+        ${this._method ? v`
               <div
                 class="pay:animate-in pay:fade-in pay:slide-in-from-bottom-1 pay:duration-300"
               >
@@ -6024,7 +6032,7 @@ class w extends C2 {
                 </div>
               </div>
             ` : _}
-        ${this._channel === "email" ? C`
+        ${this._channel === "email" ? v`
               <div
                 class="pay:flex pay:flex-col pay:gap-1 pay:animate-in pay:fade-in pay:slide-in-from-bottom-1 pay:duration-300"
               >
@@ -6046,7 +6054,7 @@ class w extends C2 {
                 ${a0(r && this._t.emailInvalid)}
               </div>
             ` : _}
-        ${this._channel === "sms" ? C`
+        ${this._channel === "sms" ? v`
               <div
                 class="pay:flex pay:flex-col pay:gap-1 pay:animate-in pay:fade-in pay:slide-in-from-bottom-1 pay:duration-300"
               >
@@ -6083,7 +6091,7 @@ class w extends C2 {
     `;
   }
   _renderSuccess() {
-    return C`
+    return v`
       <div
         class="pay:absolute pay:inset-0 pay:flex pay:items-center pay:justify-center pay:z-10 pay:bg-background pay:rounded-lg pay:px-6 pay:animate-in pay:fade-in pay:duration-300"
       >
@@ -6091,16 +6099,16 @@ class w extends C2 {
           <h2 class="pay:text-xl pay:font-bold pay:text-accent-foreground">
             ${this._t.paymentLinkSent}
           </h2>
-          ${this._channel === "email" ? C`<p>
+          ${this._channel === "email" ? v`<p>
                 ${this._t.emailSentTo} <strong>${this._email}</strong>
-              </p>` : C`<p>${this._t.smsSentTo} <strong>${this._phone}</strong></p>`}
+              </p>` : v`<p>${this._t.smsSentTo} <strong>${this._phone}</strong></p>`}
           ${we({ type: "button", onClick: this._onClose }, this._t.close)}
         </div>
       </div>
     `;
   }
   render() {
-    return C`
+    return !this._methodsLoading && this._methodsError ? v`<div class="pay:p-4">${ld()}</div>` : v`
       <div class="pay:relative pay:p-4 pay:space-y-6">
         ${this._renderForm()} ${this._success ? this._renderSuccess() : _}
       </div>